Cambia colore di riempimento del percorso URI di dati URI nello pseudo elemento

Question

È possibile utilizzare i CSS per modificare il colore di un percorso SVG che si trova all'interno di un URI di dati pseudo-elemento?

<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

Non così, dal momento che i contenuti SVG è in un altro documento. Gli stili non si applicano ai documenti.

E dal momento che lo svg verrà trattato come un'immagine stupida quando viene fatto riferimento in questo modo tramite CSS, non sarà di aiuto nemmeno lo stile di passaggio del mouse all'interno dello svg.

Si consiglia di inserire la svg in linea nel documento se si desidera modellare alcune forme al suo interno.

Detto questo, un'altra possibilità per cambiare il colore di un'immagine sta usando i filtri, poiché possono essere applicati dall'esterno. Se la tua immagine è semplice potrebbe funzionare.