- CSS

私はこのようになります私はHTMLでロードしていますSVG、持っている：- CSS

<img src="assets/img/big_layout.svg" alt="Line Overview" class="line_overview">

実際のSVGファイルは、次のようになります。

<svg x="0" y="0" width="1466" height="825" viewBox="0 0 1466 825" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
style="display: block;margin-left: auto;margin-right: auto;"> 
<defs> 
<!-- SOME STYLES I've REMOVED --> 
</defs> 
<path fill-rule="evenodd" d="M0,0L1466,0l0,825L0,825L0,0Z" class="g1_1" /> 
<path fill-rule="evenodd" d="M0,0L1466,0l0,825L0,825L0,0Z" class="g1_1" /> 
<path fill-rule="evenodd" d="M187,21l195,0l0,195l-195,0L187,21Z" 
// LOADS MORE PATHS!!!!

を

私はこのsvgのスタイルのいくつかを親のhtmlから変更することができます。 .g1_1クラスにfill: greenを追加します。これは可能ですか？

出典

2016-10-21 George Edwards

これはおそらくあなたに役立つでしょうか？ http://stackoverflow.com/questions/10139460/modify-stroke-and-fill-of-svg-image-with-javascript#10141550 –

実際には[ハック]（https://gist.github.com/）があります。 [：target]（https://developer.mozilla.org/en-US/docs/Web/CSS/:target）セレクタと、svg自体の内部で設定されたさまざまなCSSルールを含む[LeaVerou/5198257]次に、URLのハッシュ識別子をいくつかの定義された要素（ 'myFile.svg＃myBlueGroup' /' myFile.svg＃myRedGroup'）に変更するだけですが、これはちょうどハックなのであなたの質問の価値は再開されません。はじまりに答えない（cc @PaulLeBeau） – Kaiido

あなたがマークアップにSVGをロードするためのオプションを持っているなら、あなたは、次の操作を行うことができます。その後、

<html> 
... 
<svg></svg> 
... 
</html>

とCSSを経由して、それをスタイル：

svg .g1_1 { 
    fill: green; 
}

例：

svg { 
 
    width: 64px; 
 
} 
 

 
svg polygon { 
 
    fill: red; 
 
} 
 

 
svg:hover polygon { 
 
    fill: green; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48"> 
 
    <g> 
 
    <polygon fill="none" points="18,4 10,12 22,24 10,36 18,44 38,24 "></polygon> 
 
    </g> 
 
</svg>

出典

2016-10-21 23:18:05 Luke

答えて

関連する問題