SVGの描画スタイルが意外と多かったのでまとめておきます。
描画スタイルは以下のようにCSSで記述することも可能が、これから紹介するサンプルコードは説明のためHTMLに直接埋め込んでいます。
一般的には編集しやすいのでCSSに記述するのが一般的だと思います。
※単位は省略して書いていますが、主にpxがデフォルト値です。
fill(塗りつぶし)
<svg width=”100″ height=”70″>
<rect X=”10″ Y=”10″ width=”80″ height=”60″ fill=”#1600FC” />
</svg>
デフォルトは黒で塗りつぶされます。
stroke（線）
<svg width=”200″ height=”200″ viewBox=”0,0 100,100″>
<rect X=”20″ Y=”20″ width=”60″ height=”70″ stroke=”#cccccc” fill=”none” />
<rect X=”5″ Y=”5″ width=”90″ height=”50″ stroke=”#1600FC” fill=”none” />
<rect X=”10″ Y=”10″ width=”30″ height=”30″ stroke=”#1600FC” fill=”#ffffff” />
</svg
線のみを表示したい場合はfill=”none”を指定します。
※小さく作りすぎたので、viewBox=”0,0 100,100″で少しサイズ変更しています。
stroke-width (線幅)
<svg width=”100″ height=”100″>
<rect X=”10″ Y=”10″ width=”80″ height=”60″ stroke=”#1600FC” stroke-width=”10″ fill=”#ffffff” />
</svg>
stroke-widthを明記しない場合、線幅は1になります。
線幅はパスの中央が基準です。内側や外側にはできないようです。
fill-opacity （塗りの透過）
<svg width=”200″ height=”200″ viewBox=”0,0 100,100″>
<rect x=”0″ y=”10″ width=”20″ height=”30″ fill=”yellow” fill-opacity=”30%”></rect>
<rect X=”10″ Y=”10″ width=”90″ height=”80″ fill=”#1600FC” fill-opacity=”50%”></rect>
<rect x=”80″ y=”30″ width=”20″ height=”30″ fill=”red” fill-opacity=”100%”></rect>
</svg>
0％で透明になります。100%で透過していない状態です。
余談ですが描画したものは上の書かれたものが最下層にいて次に書いたものが上に描画されます。
stroke-opacity（線の透過）
<svg width=”200″ height=”200″ viewBox=”0,0 100,100″>
<rect X=”10″ Y=”10″ width=”80″ height=”70″ stroke=”#1600FC” stroke-width=”8″ fill=”#ffffff” stroke-opacity=”0.5″ />
<rect X=”20″ Y=”20″ width=”60″ height=”50″ stroke=”#1600FC” stroke-width=”6″ fill=”#ffffff” stroke-opacity=”0.1″ />
<rect X=”30″ Y=”30″ width=”40″ height=”30″ stroke=”#1600FC” stroke-width=”4″ fill=”#ffffff” stroke-opacity=”1″ />
</svg>
fill-opacityではパーセント表記でしたが1を100%ととして値を指定することもできます。
stroke-linecap (線の先端)
先端の形を指定できます。
以下の3つを主に指定します。
・butt (デフォルト): strokeの先端を90度の角度で閉じます。
・square: buttに似ていますが、パスの長さによって少し線が伸びます。
・round: 先端に半円が追加されます。stroke-widthの影響を受けます。
上から順にbatt, square, round
<svg width=”200″ height=”50″>
<line x1=”20″ y1=”20″ x2=”170″ y2=”20″ stroke=”#1600FC” stroke-width=”10″ stroke-linecap=”batt” />
<line x1=”20″ y1=”40″ x2=”170″ y2=”40″ stroke=”#1600FC” stroke-width=”10″ stroke-linecap=”square” />
<line x1=”20″ y1=”60″ x2=”170″ y2=”60″ stroke=”#1600FC” stroke-width=”10″ stroke-linecap=”round” />
</svg>
stroke-linejoin（線の結合）
stroke-linecapの場合、線の先端のみの処理のため線を結合すると以下のようになります。
左から順にbatt, square, round
<svg width=”300″ height=”100″>
<path d=”M50,10 L90,90 10,90″ fill=”none” stroke=”#1600FC” stroke-width=”10″ stroke-linecap=”batt” />
<path d=”M150,10 L190,90 110,90″ fill=”none” stroke=”#1600FC” stroke-width=”10″ stroke-linecap=”square” />
<path d=”M250,10 L290,90 210,90″ fill=”none” stroke=”#1600FC” stroke-width=”10″ stroke-linecap=”round” />
</svg>
角に変化がないことが分かると思います。
結合の処理はstroke-linejoinを使用します。
以下の3つを主に指定します。
・miter(デフォルト)：鋭角
・bevel：面取り
・round：角丸
左から順にmitter, bevel, round
<svg width=”300″ height=”100″>
<path d=”M50,10 L90,90 10,90″ fill=”none” stroke=”#1600FC” stroke-width=”10″ stroke-linejoin=”miter” />
<path d=”M150,10 L190,90 110,90″ fill=”none” stroke=”#1600FC” stroke-width=”10″ stroke-linejoin=”bevel” />
<path d=”M250,10 L290,90 210,90″ fill=”none” stroke=”#1600FC” stroke-width=”10″ stroke-linejoin=”round” />
</svg>
stroke-linecapとstroke-linejoinはセットで使用したいですね。
stroke-dasharray (点線)
stroke-dasharrayは以下のように点線を指定します。
構文
stroke-dasharray=”破線のサイズ1, 間隔1 破線のサイズ2, 間隔2……”
破線のサイズや間隔は1つあればOKです。２つめ移行はオプションです。
<svg width=”200″ height=”60″>
<line x1=”20″ y1=”10″ x2=”170″ y2=”10″ stroke=”#1600FC” stroke-width=”10″ stroke-dasharray=”20, 20″ />
<line x1=”20″ y1=”40″ x2=”170″ y2=”30″ stroke=”#1600FC” stroke-width=”40″ stroke-dasharray=”10, 1″ />
<line x1=”20″ y1=”70″ x2=”170″ y2=”50″ stroke=”#1600FC” stroke-width=”170″ stroke-dasharray=”5, 5 10, 10 20,20″ />
</svg>
stroke-dasharrayとstroke-dashoffsetを一緒に使用し、点線のスタート地点を変更することも可能です。
<svg width=”200″ height=”60″>
<line x1=”20″ y1=”10″ x2=”170″ y2=”10″ stroke=”#1600FC” stroke-width=”20″ stroke-dasharray=”20, 20″ />
<line x1=”20″ y1=”40″ x2=”170″ y2=”40″ stroke=”#1600FC” stroke-width=”20″ stroke-dasharray=”20, 20″ stroke-dashoffset=”10″ />
</svg>
stroke-linecapと組み合わせて丸い点線を作ることも可能です。
<svg width=”300″ height=”20″>
<line x1=”20″ y1=”10″ x2=”390″ y2=”10″ stroke=”#1600FC” stroke-width=”20″ stroke-dasharray=”0, 30″ stroke-linecap=”round” />
</svg>
おわり
スタイルが多くていろいろできて楽しそうですね。
スタイルを使いこなすとデザイン性がぐっと上がりそうです。
参考サイト：もっと早く知りたかった！SVGを扱うなら知っておきたいタグ＆プロパティまとめ
viewboxについて興味が湧いた方はこちらも読んでいただけると幸いです。
