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>
</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?
<symbol>
und einbinden und formatieren<use>
. Siehe diese Antwort .Antworten:
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:
Externes CSS scheint das
fill
Attribut 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.quelle
<svg>
Tag.<use href="external.svg#objId" />
und Ihr lokales CSS wird bis zu einem gewissen Grad weiterhin angewendet .fill: #000;
anstelle von verwendenbackground: #000;
.Wenn Sie die Farbe ändern möchten, indem Sie den Mauszeiger über das Element bewegen, versuchen Sie Folgendes:
quelle
Wenn Sie in den Quellcode einer SVG-Datei wechseln, können Sie die Farbfüllung ändern, indem Sie die Fülleigenschaft ändern.
Verwenden Sie Ihren bevorzugten Texteditor, öffnen Sie die SVG-Datei und spielen Sie damit herum.
quelle
Sie setzen diese CSS für SVG-Kreis.
quelle
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 deklariertwidth
undheight
. Mit dieser Breite und Höhe wird das SVG-Dokument nicht skaliert. Ich habe dies mithilfe einer CSS-transform: scale(...)
Anweisung für dassvg
Tag in meiner zugehörigen SVG-CSS-Datei umgangen.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
!IMPORTANT
das CSS zwingen musste, Vorrang zu haben.Bearbeiten Sie Ihre Ziel-SVG-Datei vor dem öffnenden
<svg
Tag, um ein Stylesheet einzuschließen. Beachten Sie, dass die href relativ zur URL der SVG-Datei ist.quelle
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
icon.html
quelle
currentColor
Es ist möglich, die Pfadfüllfarbe des SVG zu ändern. Das CSS-Snippet finden Sie unten:
So wenden Sie die Farbe für den gesamten Pfad an:
svg > path{ fill: red }
So beantragen Sie den ersten d-Pfad:
svg > path:nth-of-type(1){ fill: green }
So beantragen Sie den zweiten d-Pfad:
svg > path:nth-of-type(2){ fill: green}
Um sich für den anderen d-Pfad zu bewerben, ändern Sie nur die Pfadnummer:
svg > path:nth-of-type(${path_number}){ fill: green}
Verwenden Sie das Kapselungskonzept, um das CSS in Winkel 2 bis 8 zu unterstützen:
quelle
Gib all deine SVG ein:
In CSS:
So verwenden Sie Pseudoklassen:
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.
quelle