色や線などの属性をスタイルと呼びます。SVGのスタイルは、CSSとして記述することができます。スタイルの記述は、SVG文書から分離して別ファイルにすることができます。スタイルの記述と別ファイルの読み込みについて見ていきます。
CSSファイルの読み込み
スタイルをCSSファイルに記述し、別ファイルとして読み込む。
<!-- CSSファイルの読み込み --> <?xml-stylesheet type="text/css" href="sample.css"?> <svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="50"/> </svg>
/* sample.css */ rect { fill: blue; }
SVGファイル内にスタイルを記述する
<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"> <!-- スタイルの記述 --> <style type="text/css"> rect { fill: green; } </style> <rect x="10" y="10" width="80" height="50"/> </svg>
スタイルのルール
CSSの記述ルールに則り、スタイルを指定する。クラスセレクタ、IDセレクタ、子孫セレクタなどを使い、どの箇所にスタイルをかけるのか指定する。
/* セレクタ { 属性名: 属性値; } */ rect { fill: red; } /* .クラス名 { 属性名: 属性値; } */ .sample { fill: green; } /* #id名 { 属性名: 属性値; } */ #sample { fill: blue; }
主要なプロパティ
- 色と不透明度に関するプロパティ
- fill:塗りつぶしの色
- stroke:線の色
- opacity:塗りつぶし内部の不透明度
- stroke-opacity:線の不透明度
- 線に関するプロパティ
- stroke-width:線の幅
- stroke-linecap:端点の形状
- stroke-linejoin:接続点の形状
- stroke-dasharray:破線のパターン
- テキストに関するプロパティ
- font-size:フォントの大きさ
- font-family:フォントの名前
- font-weight:フォントの太さ
- font-style:フォントのスタイル
- text-decoration:テキストの装飾
- word-spacing:単語の間隔
- letter-spacing:文字の間隔
- text-anchor:テキストの配置
まとめ
SVGのスタイルの記述と別ファイルの読み込みについて書きました。また、主要なプロパティについて簡単にご紹介しました。詳細に関しては、各自で調べてください。
