Paras vastaus
SVG: n käyttämiseen / sisällyttämiseen projektiisi on paljon erilaisia tapoja. Tapa riippuen siitä, kuinka SVG väritetään uudelleen eri tiloissa tai olosuhteissa
- Sisäinen SVG – upota SVG-koodi suoraan.
HTML: Tämän sait SVG-kuvana tämän XML-koodin ansiosta.
CSS: Täyttöominaisuudella voidaan muuttaa SVG: n väriä, koska se luodaan HTML-koodilla, joten sinun on vaihdettava luotun SVG-polun väri.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. SVG-symboli / käyttö – upota SVG-koodin tiedosto ja hae se sieltä käyttämällä KÄYTÄ HTML-tagia
HTML: Tällä tavalla voit viedä SVG-kuvasi muodostaen toisen tiedoston käyttämällä KÄYTÄ HTML-tagia.
CSS: Samoin kuin ensimmäinen muutti juuri vientitekniikkaa, tämä tekniikkaa käytetään, kun sinulla on kymmeniä SVG-kuvia etkä halua tunkeutua HTML-sivullesi, joten tämä on vietävä yhteen tiedostoon ja voit hakea sen sieltä.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. SVG-taustakuvat – aseta kuva kuten muutkin graafiset muodot.
Tämä on niin yksinkertaista, että sinun on soitettava kahdelle kuvalle tai haluamasi tila valitsemasi tilan mukaan.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. CSS-suodattimen ominaisuuden käyttäminen – mutta ei paljon suositeltavaa.
Ei suositella, koska se ei tue toista selainta .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
Kiitos, äänestä, jos se toimii sinulle.
Nauti oppimisesta !!