Czy mogę zmienić kolor wypełnienia ścieżki svg za pomocą CSS?

Question

Mam następujący kod:

<span> 
    <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> 
     <desc></desc> 
     <defs/> 
     <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> 
     </svg>&nbsp; 
    </span> 

Czy jest możliwe aby zmienić kolor wypełnienia ścieżki SVG z CSS lub w inny sposób bez faktycznie zmieniając go wewnątrz znacznika ścieżki?

Answer 1

Tak, możesz zastosować CSS do SVG, ale musisz dopasować element, tak jak podczas stylizowania HTML. Jeśli tylko chcesz, aby zastosować go do wszystkich ścieżek SVG, można użyć, na przykład:

​path { 
    fill: blue; 
}​ 

Zewnętrzna CSS wydaje się zastąpić atrybut ścieżkę za fill, przynajmniej w WebKit i przeglądarek opartych na Gecko testowałem. Oczywiście, jeśli napiszesz, powiedzmy, <path style="fill: green">, to również zastąpi zewnętrzny CSS.

Answer 2

jeśli chcesz zmienić kolor przez unoszące się w elemencie, spróbuj tego:

path:hover{ 
    fill:red; 
} 

Answer 3

natknąłem niesamowitym zasobem na CSS sztuczki: https://css-tricks.com/using-svg/

Istnieje kilka rozwiązań wyjaśniono tam .

Wolałem ten, który wymagał minimalnych zmian w źródłowym svg, a także nie wymagał, aby był osadzony w dokumencie HTML. Ta opcja używa znacznika <object>.

---

Dodaj plik svg do swojego html za pomocą <object>; Zadeklarowałem również atrybuty html: width i height. Używając tych szerokości i wysokości dokument svg nie jest skalowany, pracowałem nad tym przy użyciu instrukcji css transform: scale(...) dla znacznika svg w skojarzonym pliku css svg.

<object type="image/svg+xml" data="myfile.svg" width="64" height="64"></object> 

Utwórz plik css do dołączenia do dokumentu svn. Moja ścieżka źródłowa svg została przeskalowana do 16 pikseli, a następnie przeskalowałem ją do 64 z czterokrotnym współczynnikiem. Miał tylko jedną ścieżkę, więc nie musiałem wybierać jej bardziej szczegółowo, jednak ścieżka miała atrybut wypełnienia, więc musiałem użyć !IMPORTANT, aby wymusić css na precedensie.

#svg2 { 
    width: 64px; height: 64px; 
    transform: scale(4); 
} 
path { 
    fill: #333 !IMPORTANT; 
} 

Edycja pliku SVG cel, przed znacznikiem otwarcie <svg, zawierać arkusz stylów; Zwróć uwagę, że href jest względny do adresu URL pliku svg.

<?xml-stylesheet type="text/css" href="myfile.css" ?> 

Answer 4

Po przejściu do kodu źródłowego pliku SVG można zmienić wypełnienie kolorem, modyfikując właściwość wypełnienia.

<svg fill="#3F6078" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
</svg> 

Użyj swojego ulubionego edytora tekstu, otwórz plik SVG i baw się z nim.

Answer 5

umieszczasz to css dla svg koła.

svg:hover circle{ 
    fill: #F6831D; 
    stroke-dashoffset: 0; 
    stroke-dasharray: 700; 
    stroke-width: 2; 
}