• Top
  • Search
  • About
  • Privacy Policy
3176011

SVG コーディングの基礎知識の第3弾です。
今回は、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も使えたりします。

Hello SVG !
<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 もあるので注意が必要ですね。

それでは、今回はここまで : )

参考サイト