SVG: use-Elemente mit custom properties stylen

[Matthias Scharwies]

Servus!

@A-S Wir hatten uns im Wiki mal über Symbol, Use und viewBox unterhalten.

Der Artikel ist jetzt fertig: SVG/Elemente/Gruppierungen

Besonders interessant: Styling des use-Elements

Das SVG-Use-Element kann aus beliebig vielen Teil-Elementen bestehen, die im Shadow DOM vorhanden sind, aber nicht durch CSS formatiert werden können. MIt custom properties können auch einzelne Bestandteile des use-Elements formatiert werden.

Herzliche Grüße

Matthias Scharwies

[A-S]

In meinem auf meiner D-Seite beschriebenen Fall habe ich auch im SVG-Tag eine viewBox mit dem Nullpunkt in der Mitte. Das Problem, mit dem Symbol nicht in die negativen Bereiche zu kommen, bleibt mit dem dargestellten Quelltext offensichtlich. Der auf SVG/Elemente/Gruppierungen dargestellte Quelltext gehört offensichtlich in ein SVG-Tag dessen viewBox den Nullpunkt in der Mitte hat.

Das funktioniert so wie dargestellt aber nicht. Ich habe also den Quelltext der Vorschau angeschaut und festgestellt, dass dort etwas Entscheidendes anders ist als beim dargestellten Quelltext. Du hast dem Symbol eine Position zugewiesen.

Mit der oberen rechten Ecke der Symbol-Viewbox als Position (x="-10" y="-10") funktioniert es offensichtlich.

[A-S]

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.

[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

[A-S]

Nein. Meine Ergänzung ist auch etwas unbeholfen. Da wird wohl nur eine "redaktionelle" SVG (eine, welche nur als Bild genutzt wird) als Grafik helfen. Ich überlege mir da mal etwas.