A-S: SVG: use-Elemente mit custom properties stylen

Beitrag lesen

Nachtrag: Im Code

<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"></circle>
		<path d="m0,6 v2"></path>
	</symbol>

	<line id="Y_axis" x1="-200" y1="0" x2="200" y2="0"></line>
	<line id="X_axis" x1="0" y1="-200" x2="0" y2="200"></line>
	<text x="3" y="-2">0,0</text>
	<use href="#wheel" x="100" y="100" height="20" width="20"></use>
	<use href="#wheel" x="150" y="100" height="20" width="20"></use>	
	
	<use href="#wheel" x="-150" y="100" height="20" width="20"></use>
	<use href="#wheel" x="-100" y="100" height="20" width="20"></use>
</svg>

bewirkt also die Übereinstimmung aller vier Angaben (x, y, height, width) mit der ViewBox (Zeile 2) die Möglichkeit, alle Quadranten (ohne Skalierung) zu nutzen. Das würde ich gerne verdeutlichen.