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

200

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?

Samantha JT Star
quelle
Heutzutage können Sie externe Dateien über <symbol>und einbinden und formatieren <use>. Siehe diese Antwort .
Totymedli

Antworten:

218

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.

Nicholas Riley
quelle
7
Funktioniert das noch mit Chrome? Ich habe Schwierigkeiten, die Farbe meines SVG-Pfads mit CSS zu ändern.
Dallas Clark
5
Danke Nicholas, ich glaube ich habe den Grund gefunden. Mein SVG wurde über ein <img> -Tag in die Seite eingebettet. CSS scheint nicht in der Lage zu sein, Inhalte darin zu ändern. Ist das richtig?
Dallas Clark
40
Beachten Sie, dass , um für CSS Stil der SVG, Sie haben , um die SVG - Code in das Markup enthalten, es funktioniert nicht , wenn Sie die SVG über das enthalten <svg>Tag.
Ricardo Zea
2
@ RicardoZea Eine Einschränkung: Sie können ein Objekt aus einer externen SVG-Datei mit einschließen, <use href="external.svg#objId" />und Ihr lokales CSS wird bis zu einem gewissen Grad weiterhin angewendet .
Ken Bellows
1
@ KenBellows Das stimmt, das habe ich jetzt gelernt. Eine Sache zu beachten ist, dass wir SVG-spezifische Eigenschaften im CSS verwenden müssen, sonst funktioniert es nicht. Zum Beispiel, um die Hintergrundfarbe zu ändern, die Sie fill: #000;anstelle von verwenden background: #000;.
Ricardo Zea
39

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

path:hover{
  fill:red;
}
Mark Esluzar Diamat
quelle
28

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.

Samuel Ramzan
quelle
2
Technisch korrekt basierend auf dem Wortlaut der Frage "... andere Mittel, ohne sie tatsächlich innerhalb des Pfad-Tags zu ändern" und genau so gearbeitet, wie ich es brauchte. Habe eine positive Bewertung!
Travis Watson
5
Wie ist das eine Antwort? Die Frage ist auf CSS, nicht native SVG
zhuhang.jasper
2
Haben Sie eine Antwort von Ihrem eigenen Mr. Jasper?
Samuel Ramzan
2
Dies ist keine Antwort. Dies ist die Verzerrung der Frage.
QMaster
16

Sie setzen diese CSS für SVG-Kreis.

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

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" ?>
ThorSummoner
quelle
4

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>
Ahmed Hakim
quelle
„Füllung / Strich entfernen“ - Das Entfernen von Füllung und Strich kann die SVGs beschädigen (zumindest meine, wenn ich dies in meiner Idee tue und das Ergebnis in einem Vorschaufenster beobachte). Alternativ kann mancurrentColor
Frank Nocke
4

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;
    }
Rohinibabu
quelle
2

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.

Neto
quelle
Willkommen bei StackOverflow, Neto. Das sieht nach einer guten Antwort aus. Danke fürs Helfen.
srm