「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（平ら） の３つの値を取ることができ、初期値は「butt」です。
See the Pen svg linecap by Takashi Abe (@TakeshiAbe) on CodePen.
折れ線の角
stroke-linejoinはpolylineや polygonの線のつなぎ目（角）の処理を指定します。
miter (留め継ぎ)・round(丸み) ・bevel(面取り)の３つの値をとり、初期値は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.
