CSSを使用したスケーラブルベクターグラフィック（SVG）
今日も私たちはScalable Vector Graphic（SVG）に関する議論を続けるつもりです、そして前の記事で指摘したように、SVGを使うことの利点の1つはそれがCSSでスタイルされることができるということです.
SVGスタイリングプロパティ
スタイリングSVGは基本的に通常のHTML要素と同じように機能します、それらは実際に同様にいくつかの共通の特性を共有しました。ただし、CSSとは別に独自の仕様を持つSVGオブジェクト専用のプロパティが他にもあります。.
例えば, 通常のHTML要素では、以下のいずれかを使用して背景色を追加できます。 背景色 または バックグラウンド CSSプロパティSVGでは、少し違います。背景色は 塗りつぶし 代わりにプロパティ。また、要素の境界は次のように指定されます。 ストローク プロパティではありません 境界 通常のHTMLで行ったように、ここで完全なリストを見ることができます。.
もしあなたがAdobe Illustratorのようなベクトルエディタをかなり長い間使ってきたのであれば、SVGのプロパティ命名メカニズムはエディタから来ているとすぐに想像できるでしょう。.
SVGスタイルの実装
SVG要素をスタイルするには、次のいずれかの方法を使用できます。
プレゼンテーション属性
すべてのSVGプロパティリストを見たことがある場合は、それらすべてを要素に直接追加して、要素の表示方法を変更することができます。次の例は、追加方法を示しています。 塗りつぶし そして ストローク のプロパティ 四角い 素子;
長方形は下のスクリーンショットのようになります。
インラインスタイルシート
また、スタイルを追加することもできます。 スタイル 属性。次の例でも追加します 塗りつぶし そして ストローク に 四角い, しかし今回はそれを スタイル そしてCSS3で回転させる 変形する 財産、そうです。.
長方形も同じ結果になりますが、回転しただけです。
内部スタイルシート
内にSVGスタイルを埋め込む スタイル 要素も可能であり、我々が通常のHTMLでそれをした方法と変わらない。以下の例は、SVG要素に影響を与える内部スタイルを追加する方法を示しています。 .html 資料.
しかし、SVGはXMLベースの言語なので、インラインスタイルシートを .SVG ドキュメントは、スタイル宣言を内部に置く必要があります。 cdata, 次のように;
の cdata CSSは持つことができるので、ここでは必須です > XMLパーサーと競合する文字を使う cdata スタイルシートに矛盾する文字が指定されていなくても、SVGにスタイルを埋め込むために強く推奨されます。.
外部スタイルシート
外部スタイルシートも同様にSVG要素に対して機能します。 .html 資料.
再び .SVG 文書では、外部スタイルシートを xml-stylesheet, そのようです.
グループ化要素
SVG要素は、でグループ化できます。
長方形と円の両方が同じ結果になります.
最終的な考え
CSSを使ってSVGをスタイリングする上で重要なことはすべて説明しましたが、これはSVGを使ってグラフィックを提供することの利点の1つにすぎません。次の投稿では、さらに別の記事を見ていきますので、しばらくお待ちください。.
- デモを見る
- ソースをダウンロード
