Beispiel:SVG-use-1.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">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<style>
#auto {
stroke: black;
stroke-width: 0.5;
animation: run 5s linear infinite;
}
#wheel {
stroke-width: 4;
animation: turn .5s infinite linear;
}
#wheel path {
fill: none;
stroke: white;
stroke-width: 1;
}
@keyframes turn {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
line {
fill: none;
stroke: black;
stroke-width: 1;
}
@keyframes run {
0% {transform: translate(-200px, 0) }
100% {transform: translate(600px, 0) }
}
use.truck {
fill: #e6f2f7;
transform:scale(1.3,1.3);
animation-duration: 12s;
}
use:nth-of-type(5) {
fill: #dfac20;
animation: run 6s linear infinite;
}
svg {
max-width: 80em;
min-height: 400px;
}
</style>
<title>Beispiel: Styling von use-Elementen</title>
</head>
<body>
<h1>Styling von use-Elementen</h1>
<svg viewBox="-100 -100 600 300">
<defs>
<symbol id="wheel" x="-10" y="-10" height="20" width="20" viewBox="-10 -10 20 20" >
<desc>Autoreifen mit Ventil, damit eine Rotation später sichtbar wird</desc>
<circle cx="0" cy="0" r="8" />
<path id="valve" d="m0,-6 v2" />
</symbol>
<g id="auto">
<path id="body" d="M 0,30 v-15 h15 l15,-15 h30 l15,15 h15 v15z" />
<use href="#wheel" x="20" y="30" height="20" width="20"/>
<use href="#wheel" x="70" y="30" height="20" width="20" />
</g>
</defs>
<line id="Y_axis" x1="-200" y1="0" x2="200" y2="0" />
<line id="X_axis" x1="0" y1="-200" x2="0" y2="200" />
<text x="5" y="-5">0,0</text>
<use href="#wheel" x="0" y="0" height="20" width="20" />
<use href="#auto" x="50" y="50" style="fill:#c32e04"/>
<use href="#auto" x="100" y="25" style="fill:#5a9900; animation-duration: 4s;"/>
<use href="#auto" class="truck" x="250" y="5" />
<use href="#auto" x="200" y="5" />
</svg>
</body>
</html>
