背景イメージとしてSVGを指定し、CSSでSVGスタイルを設定しますか？

Question

SVGをバックグラウンドイメージとして指定できますか？また、同じCSSファイル内のSVGをスタイル付けすることはできますか？

SVGイメージを単一のファイルまたはスプライトとして配置、スケーリング、およびクリップするのはとても快適ですが、SVGイメージを同じCSSファイル内でスタイル設定することは可能です背景画像。私は親要素のクラスに基づいて単純な形状の色を変化させるために、次の操作を行いたいのですが、擬似CSSで

：

element1 { 
background-image(icon.svg); 
} 

element1.black .svg-pathclass { 
fill: #000000; 
} 

element1.white .svg-pathclass { 
fill: #ffffff; 
} 

は明らかにこれはSVG持つクラスのパスを想定している.SVG -pathclass

これは可能ですか？

Answer 1

いいえ、これはできません。 SVGはある文書（data URIまたは外部参照ファイルでもよい）に用意されていて、別のファイルの背景としてとをバックグラウンドとして使用する必要があります。

Answer 2

あなたはSVGの内部のスタイルを通常のCSSを使用し、その後、この効果を再現するSVGとCSSマスクを使用することができ、でもbackground-image

-webkit-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 
    -o-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 
    -ms-mask: url(filename.svg) 50% 50%/100px 50px no-repeat; 

background-color: red; 
background-image: url(animated.gif); 

/* Filename, Position/Size, Repeat */ 
/* Modernizr.cssmask is the test needed to pass - snippet below */ 

あなたはelementに付加することによって、ドロップシャドウを作成するためにこれを使用することができますDOMとそれよりも低いZ-インデックスと不透明度を設定したスタイリング。

希望に役立ちます！

編集：Modernizrテスト

• リンク - http://pastebin.com/w4eVbEKr
• いくつかのより多くの情報 - https://www.webkit.org/blog/181/css-masks/

Answer 3

それは、バックグラウンドのSVGを "インライン化" により、生産にプリプロセッサを使用することができる人のために実際に可能ですで操作したい部分へのアクセスを得るために、svgの全体を「スライス」するSASS mixinsのビットを使用します。あなたは、

を要素
<div class="element1"></div>を持って、あなたのオリジナルのシナリオでは

ので、あなたはあなたのためにSVGをインライン化しますmixin/functionを必要としています。あなたはそう、fillの制御したいとしましょう：

@mixin inline-svg($color, $svg-content) { 
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>'; 
    $end: '</svg>'; 

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); 
} 

$svg-content変数があなたの<svg>もの（あなたがmixinの内側からアクセスしたい）<style>要素を除くとsvgタグをラップです,,すなわち： $svg-content = "<path .... />"

これは単なる内部渡された値に含まれる必要があります。
@include inline-svg(salmon, $svg-content);

Wholおよびを合計するにはEの事がアップ、これはSASSコード例を次に示します。

$svg-content = "<path .... />" 

@mixin inline-svg($color, $svg-content) { 
    $start: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><style>path { fill:#{$color}; }</style>'; 
    $end: '</svg>'; 

    background-image: url('data:image/svg+xml;utf8, #{$start}#{$svg-content}#{$end}'); 
} 

.element1 { 
    @include inline-svg(rgba(0,0,0,0.6), $svg-content); 
} 

私はここの可能性が（制限はここでそのアプローチにもあります）かなり大きいと思います。実際にSASS mapを私のmixinにcssのスタイルでkey、valueのペアに渡してcssスタイルの全体束をsvgの部分に注入します。

これは技術的には可能ですが、より多くのコンピュテイティが必要ですが、これが完了すると、プロジェクト全体でこのmixinを再利用するメリットが得られます。