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](https://www.robertbienert.de/self/svg-css-use.html#use-extern). > Der Wiki-Artikel erklärt es imho zutreffend: * [SVG/Tutorials/Gruppierungen#use_im_Shadow-DOM](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Gruppierungen#Styling_mit_custom_properties))arbeitet so: ~~~ SVG <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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Vermischen_mit_Blend-Modes) - *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 -- Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!

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](https://www.robertbienert.de/self/svg-css-use.html#use-extern). > Der Wiki-Artikel erklärt es imho zutreffend: * [SVG/Tutorials/Gruppierungen#use_im_Shadow-DOM](https://wiki.selfhtml.org/wiki/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 sind im Shdow 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](https://wiki.selfhtml.org/wiki/SVG/Tutorials/Gruppierungen#Styling_mit_custom_properties))arbeitet so: ~~~ SVG <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](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Vermischen_mit_Blend-Modes) - *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 -- Eigentlich hatte ich heute [viel vor](https://wiki.selfhtml.org/wiki/Kategorie:ToDo) - jetzt habe ich morgen viel vor!