SVG-Path-Farbe mit Klick auf Button ändern

Offenbar kann man die Elemente eines SVGs als Hintergrundbild nicht mit CSS gestalten:

https://stackoverflow.com/ques…erved-as-background-image

Zitat

Because as a background img, it isn't part of the DOM and you can't manipulate it.

Du kannst jedoch den selben Effekt erzielen, indem Du die Grafiken normal einbettest und z. B. die opacity animierst um zwischen den drei Grafiken umzuschalten.

PS: Außerdem liefert document.querySelector nur das erste Element. Da dein Selektor mehrere Elemente liefert, musst Du document.querySelectorAll benutzen und die Element in einer Schleife abarbeiten.

Ich hatte mir vorgestellt, die SVGs in den selben Container .icon zu legen und absolut zu positionieren, so dass sie übereinander liegen. Da es drei Bilder sind, musst Du jedes für 1/3 der Zeit, d. h. 33.33% anzeigen. Und wenn Du statt gezielter Klassen alle Pfade ändern willst, brauchst Du ebenfalls querySelectorAll und eine Schleife, denn es sind ja mehrere Pfade. Und musst den Punkt vor dem "path" weg lassen.

Ausgehend von deiner ersten Version habe ich dies gemacht:

https://codepen.io/Sempervivum/pen/RXoBmm

BTW: Wenn wir bei Opacity sind, kann man mit wenigen Änderungen am Timing einen netten Übergangseffekt erzielen:

https://codepen.io/Sempervivum/pen/oKYJRX

Mit dem Übergangseffekt finde ich das auch schöner.

Falls es wen interessiert?

Für unsere Javascript feinden kann man es auch ohne JS machen

https://basti1012.bplaced.net/…rdner=html-seminar&id=376