6

CSS を使用して、疑似要素 data-URI 内にある SVG パスの色を変更することは可能ですか?

<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; }
4

1 に答える 1

6

svg コンテンツは別のドキュメントにあるため、そうではありません。スタイルはドキュメント間では適用されません。

また、CSS を介してこのように参照すると、svg はダム画像として扱われるため、svg 内にパス ホバー スタイルを配置しても役に立ちません。

ドキュメント内でいくつかの形状のスタイルを設定したい場合は、svg をドキュメントにインラインで配置することをお勧めします。

とはいえ、画像の色を変更するもう 1 つの可能性は、外部から適用できるフィルターを使用することです。あなたのイメージが単純であれば、うまくいくかもしれません。

于 2013-08-27T05:43:39.197 に答える