Beispiel:SVG-symbol.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:SELFHTML-Beispiel-Grundlayout.css">
<style>
#wheel {
fill: grey;
stroke: black;
stroke-width: 4;
}
#wheel path {
fill: none;
stroke: white;
stroke-width: 1;
}
line {
fill: none;
stroke: black;
stroke-width: 1;
}
text {
fill: #c32e04;
}
svg {
max-width: 80em;
height: 400px;
}
</style>
<title>Beispiel: Vorlagen mit symbol festlegen</title>
</head>
<body>
<h1>Vorlagen mit <code>symbol</code> festlegen</h1>
<svg viewBox="-200 -200 400 400">
<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 auch sichtbar wird</desc>
<circle cx="0" cy="0" r="8" />
<path d="m0,6 v2"/>
</symbol>
<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="3" y="-2" >0,0</text>
<use href="#wheel" x="100" y="100" height="20" width="20" />
<use href="#wheel" x="150" y="100" height="20" width="20" />
<use href="#wheel" x="-150" y="100" height="20" width="20" />
<use href="#wheel" x="-100" y="100" height="20" width="20" />
</svg>
</body>
</html>
