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

URL: https://webrandum.net/svg-css-properties/
公開日: 2019-08-29
更新日: 2019-08-28
カテゴリー: コーディング
タグ: CSS, SVG
出典: Webrandum（著者: サイトウ マサカズ）

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

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

## 塗りの指定

### fill：塗りの色を指定

fillを使うとSVGの塗りを指定できます。

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

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

See the Pen [XWrRwaW](https://codepen.io/31mskz10/pen/XWrRwaW/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

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

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

See the Pen [SVG：fill-opacity](https://codepen.io/31mskz10/pen/gOYWJyj/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

## アウトラインの指定

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

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

See the Pen [SVG：stroke](https://codepen.io/31mskz10/pen/zYOwVmp/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

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

See the Pen [SVG：stroke-opacity](https://codepen.io/31mskz10/pen/BaBRgeN/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

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

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

See the Pen [SVG：stroke-width](https://codepen.io/31mskz10/pen/bGbWXde/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

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

stroke-dasharrayを使うと、アウトラインを点線や破線にできます。

点線の長さと間隔の長さをコンマまたはスペースで区切ることで、設定できます。

See the Pen [SVG：stroke-dasharray](https://codepen.io/31mskz10/pen/gOYWVwa/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

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

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

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

See the Pen [SVG：stroke-dashoffset](https://codepen.io/31mskz10/pen/eYOWqKP/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).

### stroke-linecap：線の端の設定

stroke-linecapを使うと、線端の設定ができます。

設定できる値は下記の通りです。

| 値 | 形 |
| --- | --- |

| butt | 端が線の長さと等しくて平ら（デフォルト） |
| --- | --- |

| round | 端が丸くなる |
| --- | --- |

| square | 端が四角くなる（線の長さより長くなる） |
| --- | --- |

See the Pen [SVG：stroke-linecap](https://codepen.io/31mskz10/pen/gOYWVzw/) by Masakazu Saito ([@31mskz10](https://codepen.io/31mskz10)) on [CodePen](https://codepen.io).