私はWebアプリケーションのためにuiで作業しています。私はhtml5/css3の部分を終えました、残っている唯一のものはいくつかのsvg要素です。問題は、アプリケーションに異なるテーマがあることです。テーマを変更するには、これらの要素をスタイルする方法がわかりません。私は1つの方法は、各テーマごとに別の.svgファイルを作ることだと思うが、svg要素を与える方法がある(それはhtmlファイルに含めることができ、外部ファイルでなくてもよい)影だけではなく、CSSを使用して?css3でsvg要素のスタイルを設定する
3
A
答えて
4
ストロークと塗りつぶしのプロパティを使用して、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を変更することができますプログラマチックには、あなたの場合はおそらく問題の価値はありません。
関連する問題
- 1. チェックボックスのスタイルをCSS3で設定する
- 2. CSS3トランジションによるSVG要素のアニメーション
- 3. Typescript、HTMLの要素のスタイルを設定
- 4. CSS3を使用して特定の親要素にスタイルをスキップする方法
- 5. SVG CSS3ショーは以下のSVGを考えると、他の要素
- 6. CSS3でimgのスタイルを設定するには
- 7. svg要素プロパティをD3と非同期で設定する
- 8. ユーザーコントロールで要素のスタイルを動的に設定する方法
- 9. Firefoxでselect要素のスタイルを設定する
- 10. javascriptでSVG要素スタイルを操作する方法は?
- 11. トップsvg要素の位置を設定する方法は?
- 12. CSS3を使って "Read More"のスタイルを設定するには
- 13. CSS/Css3でHTMLボタンのスタイルを設定しますか?
- 14. 単一の要素に異なるスタイルを設定する
- 15. ページングされたメディア要素のスタイルを設定するには
- 16. テキストリストや他の要素をスタイル設定するには?
- 17. 要素のスタイルを設定する方法:スタイルなしのフォーカス:ホバー
- 18. jQueryプラグインを入手してcss3変換スタイルを設定する
- 19. html要素のスタイルを透明に設定できません
- 20. ContentPresenter内のすべての要素のスタイルを設定
- 21. SVGテキスト要素にCSSスタイルを適用できません
- 22. MVCのHTML要素のスタイル/クラスを設定する方法は?マスターページで
- 23. フレックスボックスを使用したリスト要素のスタイル設定
- 24. 他の要素がCSSで隠されている場合、要素のスタイルを設定します
- 25. 最初の要素にのみjavascriptの設定スタイル
- 26. SVGの<text>要素の値を取得して設定する方法
- 27. jQuery UIダイアログ内の要素のスタイル設定
- 28. ツールチップのスタイル設定?私は、この要素持っ
- 29. <img>要素のプレースホルダテキストのスタイルを設定できますか?
- 30. SVGパス要素
ここをクリックhttp://www.w3.org/TR/SVG/styling.html#SVGStylingProperties CSSを使ってスタイルを設定することはCSSとスタイルを設定することと同じではありません – philipp
これはCSSとhtmlと同じです異なるのは、特定のプロパティがsvg要素に適用されるかどうかの方法/方法だけです。 –