SVG-Grafik Farbe bei use-Elementen ändern

[Matthias Scharwies]

Hallo Robert und Rolf

kann man in SVG Elemente, die mit use hereingeholt wurden, hineinstylen? Das hatte ich neulich mal, ging auch nicht. Oder ich war zu blöd dafür...

es funktioniert.

Der Wiki-Artikel erklärt es imho zutreffend:

• SVG/Tutorials/Gruppierungen#use_im_Shadow-DOM

1. use-Elemente können mit CSS gestylt werden. So kann man einfarbige Rechtecke - wie in Roberts Beispiel - mit Füllung und Kontur versehen.
2. Mögliche Kindelemente innerhalb des symbol-Elements im Definitionsabschnitt (z.B. bei mehrfarbigen Icons) sind im Shadow DOM gekapselt und können nicht mit Selektoren angesprochen werden.
   • Ein Umweg ist es Eigenschaften mit custom properties zu belegen und deren Werte dann entsprechend zu setzen.

Dieses Beispiel (SVG/Tutorials/Gruppierungen#Styling_mit_custom_properties)arbeitet so:

<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
		style="fill: var(--accentcolor2);" cx="0" cy="0" r="8" />
		<path id="valve" d="m0,-6 v2" /> </symbol>
	<g id="auto">
		<path id="body" style="fill: var(--bodycolor);" d="M 0,30 v-15 h15 l15,-15 h30 l15,15 h15 v15z"
		/>
		<path id="windows" style="fill: var(--accentcolor1); stroke-width:0;" d="M 19,15 h24 v-13 h-11 z m 27,0 h24 l-13,-13 h-11z"
		/>
		<use href="#wheel" x="20" y="30" height="20" width="20" />
		<use href="#wheel" x="70" y="30" height="20" width="20" /> </g>
</defs>

<use href="#auto" x="50" y="50" style="--bodycolor: #c32e04; --accentcolor1: #fff; --accentcolor2: white"
	;/>

Angesichts der Versuche von Linuchs ein HTML-img mit fill zu färben (Dafür gibt's doch mix-blend-mode - duckundwech), nachdem er letzte Woche ein 7m langes Bild auf mein iPhone schicken wollte, kann ich eure Motivation im Beantworten von Fragen nur bewundern.

Herzliche Grüße

Matthias Scharwies