SVGを扱うなら知っておきたいこと：CSSプロパティ編

SVGを扱うためのCSSプロパティも多数存在していますが、主に塗りを扱う「fill」と線を扱う「stroke」の2つのグループが存在しています。
また、それぞれのプロパティを「animation」で指定することでSVGをアニメーションとして動かすことができるようになります。

1. fill (塗り)

fillは、要素の中の塗りの色を指定することができるプロパティです。
もちろん、塗りは単色だけでなく、グラデーションを指定することもできます。

fill: #0060e6;

2. fill-opacity (塗りの透明度)

fill-opacityは、fillで塗られた箇所の透明度を変えることができるプロパティです。

fill-opacity: 0.6;

ちなみにopacityでも透明度を変えることができますが、opacityはSVG全体の透明度を調整するので、線も含めて透過してしまいます。

3. stroke (線)

strokeは、要素のアウトラインの色を指定できるプロパティです。

stroke: #0060e6;

borderなどの他のアウトライン関連のプロパティと違い、幅や大きさなどをショートハンドで記述することはできません。

4. stroke-opacity (線の透明度)

stroke-opacityは、要素のアウトラインの透明度を指定できるプロパティです。

stroke-opacity: 0.4;

5. stroke-width (線の太さ)

stroke-widthは、外形線の幅を指定できるプロパティです。
0かnoneを指定すると、アウトラインを消すことができます。

stroke-width: 3;

6. stroke-linecap (線の先端の形)

stroke-linecapは、パスの先端の形を指定するプロパティです。
「butt」で線に等しく平らかな形になり、「square」で線の端が四角くなり、「round」で線の端が丸くなります。

stroke-linecap: square;

7. stroke-linejoin (線のつなぎ目の形)

stroke-linejoinは、パスのつなぎ目の形を指定するプロパティです。
「miter」はそのままつなぎ合わせ、「bevel」はつなぎ目が平らになり、「round」はつなぎ目が丸くなります。

stroke-linejoin: bevel;

8. stroke-dasharray (破線の間隔)

stroke-dasharrayは、破線の間隔を指定するプロパティです。
指定した間隔に応じて、等間隔で破線を表示します。

stroke-dasharray: 3px;

9. stroke-dashoffset (破線の開始位置)

stroke-dashoffsetは、破線の開始位置を指定するプロパティです。

stroke-dashoffset: 10px;