web-dev-qa-db-ja.com

CSSの：beforeまたは：afterでSVGの塗りつぶし色を変更する

私はこのように置かれたSVGグラフィックを持っています：

a::before { content: url(filename.svg); }

タグの上にマウスを移動すると、新しいSVGファイルを読み込まずに、SVGで塗りつぶしの色を変更することができます。

a:hover::before { content: url(filename_white.svg); }

これは、JavaScript、jQuery、または私が気付いていない純粋なCSSを使用して実現できますか？

ありがとう。

javascriptjquerycsssvgpseudo-element
30
mnsth

contentプロパティを使用すると、<img>要素のsvgと機能的に同等の（非公開の）マークアップが生成されます。

次の理由により、svgドキュメント内の要素にスタイルを適用できません。

  1. スタイルはドキュメント間でカスケードできません
  2. <img>（またはcontent、またはsvgを参照するcssイメージプロパティ）を使用する場合、セキュリティ上の理由により、svgドキュメントはブラウザに公開されません。

同様の質問ですが、background-imagehere および here 。

だから、あなたが望むことをするためには、どういうわけか上記の2つのポイントを回避する必要があります。質問には、インラインsvgの使用、フィルター（<img>に適用）の使用、さまざまなsvgファイル（またはデータURI）の生成など、さまざまなオプションがあります。

17
Erik Dahlström

受け入れられた答えは間違っています。これは、SVG maskとbackground-colorで回避策を適用することで実際に可能です。

p:after {
  width: 48px;
  height: 48px;
  display: inline-block;
  content: '';
  -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/heart.svg) no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
}

.red:after {
  background-color: red;
}

.green:after {
  background-color: green;
}

.blue:after {
  background-color: blue;
}
<p class="red">red heart</p>
<p class="green">green heart</p>
<p class="blue">blue heart</p>

実際にはSVG DOM自体を変更するのではなく、背景色を変更するだけです。そうすれば、画像やグラデーションを背景として使用することもできます。

更新

MisterJが述べたように、 この機能は残念ながら広くサポートされていません 。

3年後、プレフィックス使用のサポートは 93％ に上昇しました。

35
lmaooooo