Praca na SVG

pytanie zadane 22 marca 2020 w HTML i CSS przez kuba1245677 Obywatel (1,080 p.)

Czy muszę wklejać cały kod SVG na "chama" do HTML czy jest jakiś inny sposób żeby mieć dostęp do id i móc pracować w CSS/JS?

2 odpowiedzi

odpowiedź 22 marca 2020 przez Patrycjerz Mędrzec (192,320 p.)

Jak wklejać cały kod? Przecież możesz normalnie umieścić obraz SVG na stronie za pomocą tagu `<img>`

<img src="obraz.svg" alt="obraz">

komentarz 22 marca 2020 przez kuba1245677 Obywatel (1,080 p.)

wiem ale jak tak zrobiłem, nie działał mi css

odpowiedź 22 marca 2020 przez eunstachy Stary wyjadacz (14,180 p.)

ID do elementu svg możesz dodać bez problemu na przykład

<img src="awesome.svg" id="awesome-icon" />

Niestety taki sposób nie pozwoli Ci zmieniać obrazka za pomocą CSSa. Na przykład coś takiego nie przejdzie:

svg:hover {
  fill: red;
}

Aby to zrobić musisz wkleić cały kod z pliku svg do strony. Możesz jednak ten proces zautomatyzować za pomocą JSa. Tutaj przykładowy kod: Link

Dzięki temu elementy SVG będziesz mógł wklejać w kodzie jako zwykłe obrazki, następnie będą one konwertowane na "inline svg" (nie wiem czy jest jakieś dobre określenie na to po polsku) dzięki czemu będziesz mógł manipulować obrazkiem za pomocą CSSa.