あなたのsvgが「content：url（..）」にあるときに塗りつぶしの色を変える方法

Question

私がやっていることは、CSSトランジションを使って "content：url（..）"内のsvgの塗りつぶし色を変更することです。 、画像を完全に置き換えるのではなく、

HTML：

<h3>Hello World</h3> 

CSS

body: { background-color: #121212; } 

h3:after { 
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="115" height="10" viewBox="0 0 115 10"><defs><style>.a{fill:#013963;}</style></defs><title>header-btm-sm-2</title><rect class="a" width="9" height="10"/><rect class="a" x="76" width="9" height="10"/><rect class="a" x="89" width="9" height="10"/><rect class="a" x="13" width="4" height="10"/><rect class="a" x="26" width="4" height="10"/><rect class="a" x="34" width="4" height="10"/><rect class="a" x="55" width="4" height="10"/><rect class="a" x="63" width="4" height="10"/><rect class="a" x="111" width="4" height="10"/><rect class="a" x="102" width="4" height="10"/><rect class="a" x="42" width="9" height="10"/></svg>'); 
    display: block; 
    transition: all .25 ease-in; 
} 

h3:hover:after { 
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="115" height="10" viewBox="0 0 115 10"><defs><style>.a{fill:#f6f6f6;}</style></defs><title>header-btm-sm-2</title><rect class="a" width="9" height="10"/><rect class="a" x="76" width="9" height="10"/><rect class="a" x="89" width="9" height="10"/><rect class="a" x="13" width="4" height="10"/><rect class="a" x="26" width="4" height="10"/><rect class="a" x="34" width="4" height="10"/><rect class="a" x="55" width="4" height="10"/><rect class="a" x="63" width="4" height="10"/><rect class="a" x="111" width="4" height="10"/><rect class="a" x="102" width="4" height="10"/><rect class="a" x="42" width="9" height="10"/></svg>'); 
} 

Here's my codepen

Answer 1

短い答えは申し訳ありません、することはできませんです。

具体的には、ドキュメントの境界を越えてsvgイメージのスタイルを設定することはできません。インラインSVGのみをスタイルできます。あなたのアプローチの問題は、contentプロパティではページにコンテンツを挿入したりインライン化することができないということです。あなたが基本的にしていることは、「影の」imgタグを作成することです。したがって、imgタグのsvgに関する制限がここでも適用されます。

既に、この問題の解決策があります。例えば参照：

• Change foundation svg color on hover
• img src SVG changing the fill color

あなたはあなたの問題を解決するために複数のオプションを持っています。あなたはあなたのsvgコンテンツをインライン化し、いつものようにそれをスタイルすることができます。

しかし、ほとんどの人が気付いていないきちんとした小さなトリックがあります。それはcurrentColorキーワードの使用です。これで、colorプロパティを使用して、すべての親要素にcssで設定された現在の色を継承し、それを色を受け入れる他のプロパティで使用することができます。この例では、最初の円の塗りつぶし色としてh3要素の色を使用します。うまくつまり細工されている場合、このアプローチは、SVGの構造の知識を必要としないという利点がある

...

svg { 
 
    height: 1em; 
 
} 
 
h3 { 
 
    color: red; 
 
    transition: all 0.5s 
 
} 
 
h3:hover { 
 
    color: green 
 
}

<h3>Hello 
 
    <svg viewBox="0 0 100 100" width="1em" > 
 
    <circle cx="50" cy="50" r="45" fill="currentColor"/> 
 
    <circle cx="30" cy="50" r="25" fill="white"/> 
 
    </svg> 
 
</h3>

別のアプローチで提案されているように他の投稿は、ウェブフォントを使用することです。 フォントを使用する場合は、コンテンツプロパティを使用してテキストを挿入するだけです。このテキストは、あなたのフォントフェースを使用することを含めてスタイリングすることができます。

@font-face { 
 
    font-family: 'ean13_font'; 
 
    src: url('https://cdn.rawgit.com/Holger-Will/ean13-font/master/fonts/ean13.woff') 
 
} 
 
h3 { 
 
    color:red; 
 
    transition: all 0.5s; 
 
} 
 
h3:after { 
 
    content: '_1*L2L3G4L5G2G3**R4R3R2R5R8*'; 
 
    font-family: 'ean13_font'; 
 
    font-size: 120px; 
 
    font-weight: 200; 
 
} 
 
h3:hover { 
 
    color: green; 
 
}

<h3>Hello</h3>

さらに別のアプローチは、あなたのSVGを挿入するアニメーションまたは変更するためのJSを使用することです。私はjs/jqueryソリューションがあまりエレガントではないと思うので、ここで詳しく説明しません。