css3でsvg要素のスタイルを設定する

Question

私はWebアプリケーションのためにuiで作業しています。私はhtml5/css3の部分を終えました、残っている唯一のものはいくつかのsvg要素です。問題は、アプリケーションに異なるテーマがあることです。テーマを変更するには、これらの要素をスタイルする方法がわかりません。私は1つの方法は、各テーマごとに別の.svgファイルを作ることだと思うが、svg要素を与える方法がある（それはhtmlファイルに含めることができ、外部ファイルでなくてもよい）影だけではなく、CSSを使用して？

Answer 1

ストロークと塗りつぶしのプロパティを使用して、CSSを使用してSVGエレメントの色を変更することができます。たとえば、あなたが何かすることができます：あなたが変更したくない場合は

rect 
{ 
    fill: blue; 
    stroke: black; 
} 

を、たとえば、すべての長方形は、あなたがSVG内のクラスを定義し、同様に彼らの塗りと線のプロパティを変更することができます。

残念ながら、CSSを使用してSVG画像の枠線、グラデーション、影を変更することはできません。少なくとも、CSS3を使ってhtml要素を変更するのと同じ方法ではありません。あなたはプログラム的に多くを行うことができます。たとえば、あなたはSVG画像で定義されたshadow-like filtersを持っている場合、あなたは動的にCSSでそのフィルタのプロパティを変更することにより、任意の要素に適用することができます

filter:url(#filterName); 

フィリップにより投稿されたリンクはall SVG attributes that can be changed through CSS を示していますあなたは常にあなたのSVGを変更することができますプログラマチックには、あなたの場合はおそらく問題の価値はありません。