Beispiel:SVG-CSS-4.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"> <title>SVG und custom properties</title> </head>

<body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 280"> <title>SVG und custom properties</title> <metadesc/> <style> .stylesheet { fill: var(--gold); stroke: var(--blue); stroke-width: calc(1.5px * var(--width)); }

svg { --blue: steelBlue; --green: #8db243; --red: #c82f04; --gold: gold; --width: 5; border: thin dotted var(--blue); }

</style> <defs> <symbol xmlns="http://www.w3.org/2000/svg" id="circle" height="95" width="95" viewBox="-50 -50 99 99"> <circle x="47" y="47" r="45"/> </symbol> </defs> <rect class="one" x="10" width="90" height="90" fill="var(--gold)" stroke="var(--green)" stroke-width="calc(0.5px * var(--width)"/> <text x="15" y="120">im XML-Attribut</text>

<rect class="inline" x="200" width="90" height="90" style="fill: var(--gold);stroke: var(--red);stroke-width: var(--width);"/> <text x="215" y="120">im style-Attribut</text> <rect class="stylesheet" x="400" width="90" height="90"/> <text x="415" y="120">im Stylesheet</text>


<use href="#circle" x="10" y="150" fill="var(--gold)" stroke="var(--green)" stroke-width="var(--width)"/> <text x="15" y="260">XML-Attribut für use</text>

<use class="stylesheet" href="#circle" x="400" y="150"/> <text x="415" y="260">im Stylesheet</text> </svg> </body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:SVG-CSS-4.html&oldid=99855“