Kann ich die Füllfarbe eines SVG-Pfads mit CSS ändern?

Ich habe folgenden Code:

  <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>

Ist es möglich, die Füllfarbe des SVG-Pfads mit CSS oder auf andere Weise zu ändern, ohne sie tatsächlich innerhalb des Pfad-Tags zu ändern?

Ja, Sie können CSS auf SVG anwenden, aber Sie müssen das Element genau wie beim Stylen von HTML anpassen. Wenn Sie es nur auf alle SVG-Pfade anwenden möchten, können Sie beispielsweise Folgendes verwenden:

​path {
    fill: blue;
}​

Externes CSS scheint das fillAttribut des Pfads zu überschreiben , zumindest in WebKit- und Gecko-basierten Browsern, die ich getestet habe. Wenn Sie beispielsweise schreiben, <path style="fill: green">überschreibt dies natürlich auch externes CSS.

Wenn Sie die Farbe ändern möchten, indem Sie den Mauszeiger über das Element bewegen, versuchen Sie Folgendes:

path:hover{
  fill:red;
}

Wenn Sie in den Quellcode einer SVG-Datei wechseln, können Sie die Farbfüllung ändern, indem Sie die Fülleigenschaft ändern.

<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> 

Verwenden Sie Ihren bevorzugten Texteditor, öffnen Sie die SVG-Datei und spielen Sie damit herum.

Sie setzen diese CSS für SVG-Kreis.

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

Ich bin auf eine erstaunliche Ressource zu CSS-Tricks gestoßen: https://css-tricks.com/using-svg/

Dort werden eine Handvoll Lösungen erklärt.

Ich bevorzugte diejenige, die nur minimale Änderungen an der Quell-SVG erforderte, und erforderte auch nicht, dass sie in das HTML-Dokument eingebettet wurde. Diese Option verwendet das <object>Tag.

Fügen Sie die SVG-Datei mit Ihrem HTML-Code hinzu <object>. Ich habe auch HTML-Attribute deklariert widthund height. Mit dieser Breite und Höhe wird das SVG-Dokument nicht skaliert. Ich habe dies mithilfe einer CSS- transform: scale(...)Anweisung für das svgTag in meiner zugehörigen SVG-CSS-Datei umgangen.

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

Erstellen Sie eine CSS-Datei, die Sie an Ihr SVN-Dokument anhängen können. Mein Quell-SVG-Pfad wurde auf 16px skaliert, ich habe ihn mit dem Faktor vier auf 64 hochskaliert. Es gab nur einen Pfad, so dass ich ihn nicht genauer auswählen musste. Der Pfad hatte jedoch ein Füllattribut, sodass ich !IMPORTANTdas CSS zwingen musste, Vorrang zu haben.

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

Bearbeiten Sie Ihre Ziel-SVG-Datei vor dem öffnenden <svgTag, um ein Stylesheet einzuschließen. Beachten Sie, dass die href relativ zur URL der SVG-Datei ist.

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

Sie können diese Syntax verwenden, sie erfordert jedoch einige Änderungen in der SVG-Datei. Entfernen Sie alle Füllungen / Striche aus dem 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>

Es ist möglich, die Pfadfüllfarbe des SVG zu ändern. Das CSS-Snippet finden Sie unten:

1. So wenden Sie die Farbe für den gesamten Pfad an: svg > path{ fill: red }

2. So beantragen Sie den ersten d-Pfad: svg > path:nth-of-type(1){ fill: green }

3. So beantragen Sie den zweiten d-Pfad: svg > path:nth-of-type(2){ fill: green}

4. Um sich für den anderen d-Pfad zu bewerben, ändern Sie nur die Pfadnummer:
   svg > path:nth-of-type(${path_number}){ fill: green}

5. Verwenden Sie das Kapselungskonzept, um das CSS in Winkel 2 bis 8 zu unterstützen:

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

Gib all deine SVG ein:

fill="var(--svgcolor)"

In CSS:

:root {
  --svgcolor: tomato;
}

So verwenden Sie Pseudoklassen:

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

Erläuterung

root = HTML-Seite.
--svgcolor = eine Variable.
span.github = Auswahl eines span-Elements mit einem Klassen-Github, einem SVG-Symbol im Inneren und Zuweisen eines Pseudo-Klassen-Hovers.