svgの図形描写-2 装飾に使うCSS

svgを装飾する

SVG 基本の図形描画」で少しふれましたが、縁取り、塗りつぶしなどSVGでは装飾に関する値を設定できます。


メンテナンスや他の要素との兼ね合いを考えると、装飾関係はCSSファイルで指定しておくほうが楽です。

塗りつぶし

svgの塗りつぶしにはfillプロパティを使います。backgroundプロパティとほぼ同義と覚えておいて良いと思います。

今回割愛しますが、defsタグで定義したグラデーションなどをfillの値として使うことも出来ます。defsはいずれ機会があれば書きます。

fill-opacityで透明度を指定

fillで指定した塗りつぶし色に透明度を与えます。
指定方法はopacityと同じです。

See the Pen svg fill-opacity by Takashi Abe (@TakeshiAbe) on CodePen.

縁取り stroke

border-color とほぼ同義ですが、描画エリア(svgのwidth, heightで指定されたサイズ)にあわせて縁の幅が変化する場合があります。
線の厚みは stroke-width で指定します。

stroke-opacity

fill-opacityと同様に、strokeで指定した縁どりの色に透明度を与えます。

See the Pen svg stroke-opacity by Takashi Abe (@TakeshiAbe) on CodePen.

端の丸み stroke-linecap

lineやpolylineの先端をどう表示するかはstroke-linecapで指定します。
buttを指定するとstroke-widthに関係なく、lineと同じ長さになります。
round(丸み) ・square(四角) ・butt(平ら) の3つの値を取ることができ、初期値は「butt」です。

See the Pen svg linecap by Takashi Abe (@TakeshiAbe) on CodePen.

折れ線の角

stroke-linejoinはpolylineや polygonの線のつなぎ目(角)の処理を指定します。
miter (留め継ぎ)・round(丸み) ・bevel(面取り)の3つの値をとり、初期値はmiter です。

See the Pen svg stroke-linejoin by Takashi Abe (@TakeshiAbe) on CodePen.

stroke-dasharray

stroke-dasharrayは、間隔を指定します。
たとえばstroke-dasharray=”10″ なら実線と余白を10pxずつ繰り返します。
複数の値を指定した場合は、その値を順番に繰り返します

See the Pen svg stroke-dasharray by Takashi Abe (@TakeshiAbe) on CodePen.

stroke-dashoffset

stroke-dashoffset は、開始位置を指定します。しかし単独で使っても見た目上、何の変化も起こりません。

多くの場合、widthと同じ値をstroke-dashoffsetとstroke-dasharray 両方に指定することで図形を非表示化。
stroke-dashoffsetの位置を変化させることでアニメーション効果を生み出すのに使います。

See the Pen HelloWorld by Takashi Abe (@TakeshiAbe) on CodePen.