Beispiel:SVG-CSS-4.html
Aus SELFHTML-Wiki
<!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 260">
<title>SVG und custom properties</title>
<metadesc/>
<defs>
<style type="text/css">
.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);
}
text {
font-family: Helvetica, Arial, sans-serif;
}
</style>
<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)" y="10"/>
<text x="10" y="120">im XML-Attribut</text>
<rect class="inline" x="200" y="10" width="90" height="90" style="fill: var(--gold);stroke: var(--red);stroke-width: var(--width);"/>
<text x="200" y="120">im style-Attribut</text>
<rect class="stylesheet" x="390" y="10" width="90" height="90"/>
<text x="390" y="120">im Stylesheet</text>
<use href="#circle" x="10" y="140" fill="var(--gold)" stroke="var(--green)" stroke-width="var(--width)"/>
<text x="10" y="250">XML-Attribut für use</text>
<use class="stylesheet" href="#circle" x="390" y="140"/>
<text x="390" y="250">im Stylesheet</text>
</svg>
</body>
</html>
