SVGを操作するためのCSSプロパティまとめ

SVGの操作をするとき、普段はあまり使わない（見慣れない）CSSプロパティを使うことになるので、操作しようとする度に忘れてしまいます。

今回は自分の備忘録も兼ねて、SVGを操作するためのCSSプロパティをまとめました。

塗りの指定

fill：塗りの色を指定

fillを使うとSVGの塗りを指定できます。
ただし、SVG自体にfillが指定されていると、CSSで上書きができなくなってしまうので、反映されない場合はSVGのコード内を見て確認するようにしましょう。

他にも、:hoverなどの疑似クラスや、CSSアニメーションで値を変えていくことも可能です。

See the Pen XWrRwaW by Masakazu Saito (@31mskz10) on CodePen.

また、「塗り」であるため、短形や円形だと指定できますが、ラインなどには指定しても反映されないので注意が必要です。

fill-opacity：塗りの透明度を指定

fill-opacityでは塗りの透明度を指定できます。

See the Pen SVG：fill-opacity by Masakazu Saito (@31mskz10) on CodePen.

通常のopacityだと指定した要素全体に加えて、子要素も全て透明になってしまいますが、fill-opacityでは塗りだけが変わります。

アウトラインの指定

stroke：アウトラインの色を指定

fillが塗りなのに対して、strokeはアウトラインの色を設定します。

See the Pen SVG：stroke by Masakazu Saito (@31mskz10) on CodePen.

stroke-opacity：アウトラインの透明度を指定

fill-opacityと同様に、stroke-opacityでアウトラインの透明度指定も可能です。

See the Pen SVG：stroke-opacity by Masakazu Saito (@31mskz10) on CodePen.

stroke-width：アウトラインの太さを指定

stroke-widthではアウトラインの太さを指定できます。

単位なしでも表示され、「px」「em」「%」などひと通りの単位は使えます。

See the Pen SVG：stroke-width by Masakazu Saito (@31mskz10) on CodePen.

あまり太くしすぎると、viewBoxからはみ出して見切れてしまうので注意が必要です。

stroke-dasharray：アウトラインを破線にする

stroke-dasharrayを使うと、アウトラインを点線や破線にできます。
点線の長さと間隔の長さをコンマまたはスペースで区切ることで、設定できます。

See the Pen SVG：stroke-dasharray by Masakazu Saito (@31mskz10) on CodePen.

stroke-dashoffset：パスの最初の位置を指定

stroke-dashoffsetを使うと、アウトラインパスの最初の位置を指定できます。

破線の位置を調整するのにも使用したりしますが、CSSアニメーションでstroke-dashoffset: 0;に向かってアニメーションするように指定すると、パスをその方向から動かすことができます。

See the Pen SVG：stroke-dashoffset by Masakazu Saito (@31mskz10) on CodePen.

stroke-linecap：線の端の設定

stroke-linecapを使うと、線端の設定ができます。
設定できる値は下記の通りです。

See the Pen SVG：stroke-linecap by Masakazu Saito (@31mskz10) on CodePen.