Ändern der Füllfarbe von Daten-URI SVG-Pfad im Pseudo-Element

Question

Ist es möglich, CSS zu verwenden, um die Farbe eines SVG-Pfades innerhalb eines Pseudoelement-Daten-URI zu ändern?

<a href="http://externalurl/">External Site</a> 

CSS:

a[href^="http://"]:after { content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTVweCIgaGVpZ2h0PSIxM3B4IiB2aWV3Qm94PSItMyAyMSAxNSAxMyIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMyAyMSAxNSAxMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZmlsbD0iIzk5OTk5QSIgZD0iTTEyIDIxSDB2M2gtM3YxMEg5di0zaDNWMjF6IE04IDMzSC0ydi04aDJ2Nmg4VjMzeiBNOSAyN0g3djJINXYtMkgzdi0yaDJ2LTJoMnYyaDJWMjd6Ii8+PC9zdmc+); } 
a[href^="http://"]:hover:after path { fill: #000; } 

Answer 1

Nicht so, da der svg Inhalt in einem anderen Dokument ist. Stile gelten nicht für Dokumente.

Und da die Svg als ein dummes Bild behandelt wird, wenn sie so über CSS referenziert wird, hilft auch das Einfügen des Pfad-Hover-Stils in die Svg nicht.

Ich würde empfehlen, die Svg Inline in das Dokument zu setzen, wenn Sie einige Formen darin stylen möchten.

Eine andere Möglichkeit, die Farbe eines Bildes zu ändern, ist die Verwendung von Filtern, da diese von außen angewendet werden können. Wenn dein Bild einfach ist, könnte das funktionieren.