SVG: use-Elemente mit custom properties stylen

[Matthias Scharwies]

Servus!

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.

Habe den Code geändert!

Fällt dir ein guter Satz ein?

Herzliche Grüße

Matthias Scharwies