外部スタイルシートをsvgファイルに追加するにはどうすればよいですか？

Question

svgファイルにスタイルシートを追加したいと思います。スタイルシートは動的に変化します。私の考えはテーマを変えることでアイコンの塗りつぶしや色を変更したいからです。私が従う必要があるプロセスは何ですか？

Answer 1

OK、ページ上の他の要素と同様にSVGとその要素を制御するだけです。これはSVGがインラインであることを前提としています。

<svg id="my_icon" class="red-theme" height="100" width="100" fill="red"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" /> 
</svg> 

そして、我々は2つのテーマ、赤をテーマと青のテーマを持っていた：

だから我々はSVGを持っていると言います。 はその後、我々はCSSで2つのスタイルを作成します。

.red-theme{ 
    fill: red; 
} 
.blue-theme{ 
    fill: blue; 
} 

動的にボタンを押すにSVGのテーマを変更することにより、テーマを変更するために私たちは、その後、（この例ではいますが、他のオプションを使用することができます）にjQueryを使用することができます。

http://codepen.io/ballerton/pen/GZGrZe

・ホープ、このことができます：

$('button').click(function(){ 
    var p_class = $('#my_icon').attr('class') 
    if (p_class == 'red-theme'){ 
    $('#my_icon').attr('class', 'blue-theme') 
    } else { 
    $('#my_icon').attr('class', 'red-theme') 
    } 
}); 

すべて一緒にそれは次のようになります。