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>