Zmiana koloru wypełnienia ścieżki SVG danych-URI w pseudo elementu

Question

Czy można użyć CSS do zmiany koloru ścieżki SVG, która znajduje się w pseudo elementowym URI danych?

<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

Nie tak, ponieważ zawartość pliku SVG jest w innym dokumencie. Style nie mają zastosowania w dokumentach.

A ponieważ svg będzie traktowany jak głupi obraz, gdy zostanie przywołany w ten sposób przez CSS, umieszczenie stylu przesuwania ścieżki wewnątrz svg również nie pomoże.

Zalecam umieszczenie svg w tekście w dokumencie, jeśli chcesz nadać mu kształt.

Inna możliwość zmiany koloru obrazu polega na użyciu filtrów, ponieważ można je zastosować z zewnątrz. Jeśli Twój obraz jest prosty, to może działać.