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

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 można zmienić kolor wypełnienia ścieżki SVG za pomocą CSS lub w inny sposób bez zmiany go wewnątrz znacznika ścieżki?

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

​path {
    fill: blue;
}​

Wygląda na to, że zewnętrzny CSS zastępuje fillatrybut ścieżki , przynajmniej w testowanych przeze mnie przeglądarkach WebKit i Gecko. Oczywiście, jeśli napiszesz, powiedzmy, <path style="fill: green">to również zastąpi zewnętrzny CSS.

jeśli chcesz zmienić kolor przez najechanie kursorem na element, spróbuj tego:

path:hover{
  fill:red;
}

Jeśli przejdziesz do kodu źródłowego pliku SVG, możesz 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 ulubionego edytora tekstu, otwórz plik SVG i baw się nim.

umieść ten css dla svg circle.

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

Natrafiłem na niesamowity zasób dotyczący sztuczek css: https://css-tricks.com/using-svg/

Wyjaśniono tam kilka rozwiązań.

Wolałem ten, który wymagał minimalnych zmian od źródłowego pliku svg, a także nie wymagał osadzenia go w dokumencie HTML. Ta opcja wykorzystuje <object>znacznik.

Dodaj plik svg do swojego HTML za pomocą <object>; Zadeklarowałem również atrybuty HTML widthi height. Korzystając z tych szerokości i wysokości, dokument svg nie jest skalowany, obejrzałem to za pomocą transform: scale(...)instrukcji css dla svgznacznika w moim powiązanym pliku css svg.

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

Utwórz plik css, aby dołączyć do dokumentu SVN. Moja źródłowa ścieżka svg została przeskalowana do 16px, przeskalowałem ją do 64 ze współczynnikiem cztery. Miał tylko jedną ścieżkę, więc nie musiałem jej dokładniej zaznaczać, jednak ścieżka miała atrybut wypełnienia, więc musiałem użyć, !IMPORTANTaby wymusić na css precedens.

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

Edytuj docelowy plik SVG przed <svgtagiem otwierającym , aby dołączyć arkusz stylów; Zauważ, że href jest względny do adresu URL pliku svg.

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

Możesz użyć tej składni, ale będzie to wymagać pewnych zmian w pliku SVG. I usuń wszelkie wypełnienia / obrysy z samego SVG.

icon.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<!-- use symbol instead of defs and g, 
  must add viewBox on symbol just copy yhe viewbox from the svg tag itself
  must add id on symbol
-->
<symbol id="location" viewBox="0 0 430.114 430.114">
  <!-- add all the icon's paths and shapes here -->
  <path d="M356.208,107.051c-1.531-5.738-4.64-11.852-6.94-17.205C321.746,23.704,261.611,0,213.055,0   C148.054,0,76.463,43.586,66.905,133.427v18.355c0,0.766,0.264,7.647,0.639,11.089c5.358,42.816,39.143,88.32,64.375,131.136   c27.146,45.873,55.314,90.999,83.221,136.106c17.208-29.436,34.354-59.259,51.17-87.933c4.583-8.415,9.903-16.825,14.491-24.857   c3.058-5.348,8.9-10.696,11.569-15.672c27.145-49.699,70.838-99.782,70.838-149.104v-20.262   C363.209,126.938,356.581,108.204,356.208,107.051z M214.245,199.193c-19.107,0-40.021-9.554-50.344-35.939   c-1.538-4.2-1.414-12.617-1.414-13.388v-11.852c0-33.636,28.56-48.932,53.406-48.932c30.588,0,54.245,24.472,54.245,55.06   C270.138,174.729,244.833,199.193,214.245,199.193z"/>
</symbol>

icon.html

<svg><use xlink:href="file_path/location.svg#location"></use></svg>

Można zmienić kolor wypełnienia ścieżki w pliku svg. Poniżej znajduje się fragment kodu CSS:

1. Aby zastosować kolor do całej ścieżki: svg > path{ fill: red }

2. Aby ubiegać się o pierwszą ścieżkę d: svg > path:nth-of-type(1){ fill: green }

3. Aby ubiegać się o drugą ścieżkę d: svg > path:nth-of-type(2){ fill: green}

4. Aby ubiegać się o inną ścieżkę d, zmień tylko numer ścieżki:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. Aby wesprzeć CSS w Angular 2 do 8, użyj koncepcji enkapsulacji:

:host::ng-deep svg path:nth-of-type(1){
        fill:red;
    }

Umieść wszystkie swoje pliki SVG:

fill="var(--svgcolor)"

W Css:

:root {
  --svgcolor: tomato;
}

Aby użyć pseudoklas:

span.github:hover {
  --svgcolor:aquamarine;
}

Wyjaśnienie

root = strona HTML.
--svgcolor = zmienna.
span.github = wybranie elementu span z klasą github, ikoną svg w środku i przypisaniem pseudoklasy.