data-URIの塗りつぶし色を擬似要素のSVGパス

Question

CSSを使用して、擬似要素のdata-URI内にあるSVGパスの色を変更できますか？

​​

CSS：SVG内容は別の文書であるため、

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

Answer 1

、それが好きではありません。スタイルはドキュメント間では適用されません。

CSSでこれを参照すると、svgはダムイメージとして扱われるため、svg内にパスのホバースタイルを置くことは役に立ちません。

内部にいくつかの図形をスタイルする場合は、ドキュメントにsvgを挿入することをおすすめします。画像の色を変更する別の可能性は、外部から適用できるので、フィルタを使用することです。あなたの画像がシンプルなら、それはうまくいくかもしれません。