Beispiel:SVG-40-fill.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
 <style>

.blue { 

 fill: steelBlue;
 }

.zwei { 

 }

.none { 

 fill: none;

marker-start: url(#markerKreis); marker-mid: url(#markerKreis); marker-end: url(#markerKreis); }

rect, polyline { 

 stroke: currentColor;

}

rect { width: 100px; /* px for Firefox */ height: 100px; }

text { 

 font-family: monospace;

font-size: 12px; }

svg { color: #dfac20; } 

 </style>
 <title>SVG:  fill</title>

</head>

<body> 

 <svg viewBox="0 0 500 200">

<rect x="250" y="30" /> <rect class="blue" x="370" y="30" /> <rect class="none" x="320" y="99" /> <text x="250" y="12">keine Angabe</text> <text x="250" y="25">(Standardwert)</text> <text x="370" y="20">fill: steelBlue;</text> <text x="230" y="160">fill: none;</text>

<polyline points="10,10 40,40 10,70 40,100 10,130 40,160 10,190" /> <polyline class="none" points="110,10 140,40 110,70 140,100 110,130 140,160 110,190" /> <text x="20" y="190">keine Angabe</text> <text x="130" y="190">fill: none;</text> <defs> <marker id="markerKreis" markerWidth="8" markerHeight="8" refX="4" refY="4" style="fill: currentColor; stroke: #000;" markerUnits="userSpaceOnUse"> <circle cx="4" cy="4" r="3" /> </marker> </defs> 

 </svg>

</body> </html>

Abgerufen am 5.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-40-fill.html"