SVG コーディングの基礎知識の第３弾です。
今回は、SVG の基本的なスタイルの指定方法について学んでいきます。
SVG のスタイル指定
SVG の要素にスタイルをつけるときは、HTML と同じく CSS を使用することができます。
しかし、SVG の CSS は独自の定義がされているため、HTML のものと少し違うものがあります。
- SVG の CSS 仕様
-
SVG の CSS 仕様は、以下のサイトで確認することができます。
Painting: Filling, Stroking and Marker Symbols — SVG 2
SVG の主な CSS
SVG で使用する主な CSS は、以下のようなものがあります。
- font-family
- フォントファミリーを指定する。CSS と同じ。
- font-size
- フォントサイズを指定する。CSS と同じ。
- font-weight
- フォントの太さを指定する。CSS と同じ。
- font-weight
- 要素の表示形式を指定する。CSS と同じ。
- pointer-events
- ポインターイベントの対象になるかを指定する。
HTML でも使える CSS だが、 SVG が起源。 - fill
- 要素の塗り色を指定する。
- fill-opacity
- 要素の塗り色の透明度を指定する。
- fill-rule
- 重なった場合の塗り方を指定する。
くり抜く（evenodd）か、塗りつぶすか（nonzero）を指定できる。 - image-rendering
- ビットマップ拡大時の拡大方法を指定する。
HTML でも使える CSS だが、 SVG が起源。 - stroke
- 枠線の色を指定する。
HTML の CSS でいうところの `border-color` のようなもの。 - stroke-opacity
- 枠線の透明度を指定する。
- stroke-width
- 枠線の太さを指定する。
サイズは座標で示すので、px などの単位はいらない。
プレゼンテーション属性
SVG で図形の色や見た目に伴う属性をプレゼンテーション属性と呼びます。
プレゼンテーション属性は、図形要素に直接記述する方法と CSS から指定する方法があります。
プレゼンテーション属性は、すべて CSS に記述することができるわけではなく、x y width height など、図形の配置や形状に関わる属性は設定することができません。
SVG の CSS 例
SVG の CSS は、HTML の CSS と同じ知識で使うことができます。
たとえば、:hoverのような擬似クラスを使えたり、transitionも使えたりします。
<svg width="300" height="300" viewBox="0 0 300 300">
<style>
text {
font-family: Verdana;
font-size: 3rem;
font-weight: bold;
fill: #03A9C0;
}
circle {
cx: 150;
cy: 150;
r: 100;
fill: #E53A73;
fill-opacity: 0.7;
stroke: #03C05E;
stroke-width: 10;
}
circle:hover {
r: 200;
stroke-width: 20;
transition: all 1s;
}
</style>
<text x="0" y="160">Hello SVG !</text>
<circle></circle>
</svg>
まとめ
SVG のスタイルの付け方は、HTML の CSS とあまり変わりません。
しかし、SVG 独自の 定義がされているCSS もあるので注意が必要ですね。
それでは、今回はここまで : )