2016-04-13 20 views
1

プロジェクトでは、SVG画像を使用しています。私はそれらを色付けしようとしているが、成功せず、ここではSVGです:私は現在divの背景として、このSVGを使用していSVGの色が変更されない

<svg id="Calque_2" data-name="Calque 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 313.89 311.93"> 
<defs> 
    <style> 
     .cls-1 { 
      fill: #fff; 
      opacity: 0.3; 
     } 
    </style> 
</defs> 
<title>goutte_background</title><path 
    class="cls-1" 
    d="M1145.43,987.78c-45,0-81.7-35.18-82.09-79.35v-4.3h0a63.88,63.88,0,0,1,2-14.07,90.58,90.58,0,0,1,6.25-17.2c13.68-30.49,38.7-63.33,38.7-63.33,18.76-26.58,27.36-46.91,30.88-59.81a147.8,147.8,0,0,0-57.07,12.12,158.6,158.6,0,0,0-83.26,83.26,151.14,151.14,0,0,0-12.12,60.59c0,21.5,3.91,41.83,12.12,60.59a158.6,158.6,0,0,0,83.26,83.26c18.76,8.21,39.09,12.12,60.59,12.12h2c21.5,0,41.83-3.91,60.59-12.12a158.6,158.6,0,0,0,83.26-83.26c8.21-18.76,12.12-39.09,12.12-60.59a151.14,151.14,0,0,0-12.12-60.59,158.6,158.6,0,0,0-83.26-83.26,147.8,147.8,0,0,0-57.07-12.12c3.52,12.9,12.12,33.23,30.88,59.81,0,0,25,32.84,38.7,63.33a90.58,90.58,0,0,1,6.25,17.2,63.88,63.88,0,0,1,2,14.07h0v4.3c-0.39,44.17-37.14,79.35-82.09,79.35h-0.39Z" 
    transform="translate(-988.68 -749.72)"/><path 
    class="cls-1" 
    d="M1145.43,778.26l1.56,6.25c2,8.21,7.82,25.8,24.63,49.64,0,0,18.76,24.24,28.93,46.91a62.83,62.83,0,0,1,4.69,12.9,32.92,32.92,0,0,1,1.56,10.55h0v3.13c0,32.84-27.36,59-61,59h-0.39c-33.62,0-61-26.19-61-59v-3.13h0A32.93,32.93,0,0,1,1086,894a62.83,62.83,0,0,1,4.69-12.9c10.16-22.67,28.93-46.91,28.93-46.91,16.81-23.84,22.67-41.43,24.63-49.64Z" 
    transform="translate(-988.68 -749.72)"/></svg> 

、と私はそれは色だ変えるのに苦労しています。

ここで私が試したものです:

.someParentの.cls-1 { 塗りつぶし:#!の0080FF重要。 }

.someParent svg { 
    fill: #0080FF !important; 
} 

私はまた、SVGのstyleを削除しようとしてきたが、これは効果がなかったです。

これは私のdivの背景としてSVGを使用するためのCSSです:

background: #ffffff url("../images/goutte_background.svg") no-repeat right top; 
+3

CSSはネストされたセレクタを認識しません。私は '.someParent .cls-1 {/*...*/}'や '.someParent svg {/*...*/}'があなたが探しているものだと思います。 – Siguza

+0

私の悪い、私は嫌なことを使用しています –

+0

Sass-> CSSのコンパイルの問題がない限り、**コンパイルされたCSSの投稿のみ** – cimmanon

答えて

1

SVG塗りつぶしが背景画像の場合は調整できません。参照:https://css-tricks.com/using-svg/#article-header-id-6

可能な解決策はSVGをインライン化して、 の塗りつぶしを変更できるようにすることです。次に、それを背後の の背後に絶対配置してください。

ティモラールは言った、それはそれでした。 私は別のトリックを使いました。画像を複製して、単にstyleタグの色を変更しました。

4

それは背景画像だ場合は、記入SVGを調整することはできません。参照:https://css-tricks.com/using-svg/#article-header-id-6

可能な解決策は、SVGをインライン化して塗りつぶしの色を変更できるようにすることです。次に、その色を後ろに配置することができます。

+0

ええ、それは私が思ったことです。もしそれがbg-imageならば、なぜそれがうまくいかないのでしょうか? –

+0

@Jorel Amthorわかりません。私の直感は、背景画像の内部がDOMにアクセスできないということです。そのため、スタイルを設定することはできません。一方、SVGをインライン化すると、内部を操作できます。 – timolawl

+1

@JorelAmthor CSSはドキュメントごとに適用され、イメージは別のドキュメントであるためです。また、イメージのセマンティクスはラスタのような一貫性を持つように設計されています。 –

関連する問題