Hallo Rolf,
was ich vermisse, du aber vielleicht nur nicht gepostet hast, ist
- dem img-Element einen Quelle geben (also ein src für das img, am besten eins das auf das svg verweist)
Vielleicht ist das Element für den Moment schlecht gewählt da es kein Bild gibt eben nur das Background-image
, also src=""
wäre es dann wohl.
- das Setzen der custom Properties (a.k.a. CSS-Variablen) --color und --color-transparent
Ja das sind irgendwelche Farben spielt für die Aufgabe keine Rolle
Bei clientseitigen Fehlschlägen aller Art sollte man die Entwicklerwerkzeuge des Browsers öffnen und
- in der JS Konsole nach Fehlermeldungen schauen
Kein Fehler.
- im Netzwerk-Tab nach Ladefehlern schauen
Es wird kein Bild geladen.
- im DOM Inspektor/Explorer schauen, ob das im DOM steht, was man erwartet.
Im DOM steht wie erwartet
<image class="svg svg--gradient-test"/>
Mittlerweile bin ich beim clipPath
angekommen. Nur schaffe ich es so auch nicht eine Form auszuschneiden und nur innerhalb der Form den Gradienten der SVG darzustellen.
Gruß
Jo