【長方形SVG+CSSで遊んでみた】SVG line関連CSSプロパティ一覧

# はじめに
皆さんSVG使ってますか？そう、あの軽くて何色にも変われるアイツです。
実は私、恥ずかしながら最近までSVGを使う時は `fill` くらいしか使ってなかったのですが、最近とあるキッカケから `fill` 以外にもSVGに使えるCSSプロパティがあることを知りました。**すごい！今のブラウザ超すごい！！**
そんな感動をぜひお伝えしたい、そう思いQiitaで初となる記事を書かせて頂きました🎉

# 長方形SVGで楽しむ！基本のCSSプロパティ編
今回はただの長方形であるSVGを使いたいと思います。

```html:svg.html
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300px" height="200px" viewbox="-10 -10 620 420">
  <path fill-rule="evenodd" d="M-0.000,0.000 L300.000,0.000 L300.000,200.000 L-0.000,200.000 L-0.000,0.000 Z"/>
</svg>
```
**結果**
![スクリーンショット 2019-08-01 19.32.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/73bcdd09-3880-b115-af2a-e4c97685cb6c.png)
何とも綺麗な長方形ですね。

## fill
`fill`はSVGを塗りつぶします。今回は弊社カラーのひとつである`#04a9f4`を使用します。

```sass:svg.sass
svg
  fill: #04a9f4
```
**結果**
![スクリーンショット 2019-08-01 19.43.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/dff0d0c5-a3e9-30b1-cbc4-ae9588dc3f3c.png)
いい水色ですね

## stroke
`stroke`はSVGに枠線をつけます。その際、塗りつぶしが必要なければ`fill: none`を指定します。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
```
**結果**
![スクリーンショット 2019-08-01 19.47.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/fb4ab9b0-95ce-b636-4113-15ea3edea9f5.png)
主張が弱くなりました

## stroke-width
`stroke-width`は命名から推測できるように枠線の太さを指定します。単位は省略可能で、省略するとpx単位になります。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
```
**結果**
![スクリーンショット 2019-08-01 19.48.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/9a748145-eba7-3c19-9c3f-b646c4eb6381.png)
少し存在感を取り戻しました

## stroke-opacity
`stroke-opacity`とは…これまた命名通りに枠線の透明度を変えます。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  stroke-opacity: .3
```
**結果**
![スクリーンショット 2019-08-01 19.52.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/117659d5-b1b7-e9f2-54ac-b34902cabecd.png)
また少しだけ存在感が薄くなりました
## stroke-dasharray
線のタイプを指定するプロパティです。`border-style`のようですが、点の間隔などは自分で値を指定します。単位は省略可能で、省略するとpx単位になります。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  stroke-dasharray: 12
```
**結果**
![スクリーンショット 2019-08-01 20.21.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/184a9315-2832-9b20-719f-5f7de4172570.png)
なにこれかわいい！！😆
`border`では微妙にいい感じには表現できないやつや！

### 引数に複数値を渡せます
`stroke-dasharray`に第二引数を渡すと線の長さと間隔が調整できます！（引数が1つの場合は線の長さと間隔が同じになります）

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  stroke-dasharray: 12 24
```
**結果**
![スクリーンショット 2019-08-01 20.34.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/f35c0c43-fbcb-dd60-223a-bbdb10799fa2.png)
さっきより間隔が空きました

また、引数を4つに増やすと、第3・4引数は第1・2引数で指定した線の次に別の長さの線を置きます。ちょっと何いってるか自分でも分からないですが、要するに一点鎖線ができます。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  stroke-dasharray: 8 8 20 8
```
**結果**
![スクリーンショット 2019-08-01 20.53.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/ba42f45b-a4e3-a263-acee-975ffda98be8.png)

そして一点鎖線ができるということは…二点鎖線もできます！！

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  stroke-dasharray: 4 8 4 8 20 8
```
**結果**
![スクリーンショット 2019-08-01 20.55.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/4ac3471b-9d30-7df1-6b12-ff94d9fc495b.png)
実際に使う場面に出くわすかどうかはさておき、`border`だとこんなに自由自在には作れませんよね

## stroke-linejoin
線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。[MDN](url:https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/stroke-linejoin)
長方形SVGではそれほど違いが分かりませんでしたので飛ばします😣

### とれる値
- `miter` デフォルト値
- `round` 丸くなる
- `bevel` 面取り

## stroke-linecap
パスの終端の形状をどうするか決めるそうです。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 8
  stroke-linecap: round
  stroke-dasharray: 1 24
```
**結果**
![スクリーンショット 2019-08-01 21.23.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/405d8545-48a1-7f05-1cea-aad156b6d73a.png)
roundを利用して女子ウケを狙いに行きました。渡せる値は以下があります

- `butt` デフォルト値
- `round` 丸くなる
- `square` 四角くなる 

## stroke-dashoffset
線の開始位置を指定できます。

### before
分かりやすくするために線の長さを100pxにしましょう。このSVGは縦200px・横300pxなので、それぞれ破線が2個・3個できるはずですね。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  stroke-linejoin: bevel
  stroke-dasharray: 100
```
**結果**
![スクリーンショット 2019-08-01 20.44.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/ec4897d7-0211-9a9a-9c38-5c2d7fedab3a.png)

### after
これを50pxずらすとそれぞれの線の半分ぶんずれるので角を覆うような形なります。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  stroke-linejoin: bevel
  stroke-dasharray: 100
  stroke-dashoffsest: 50
```
**結果**
![スクリーンショット 2019-08-01 20.45.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/ed05379c-629f-794d-7eaa-17f4416056e9.png)
カメラのあれみたい

## もう少しカスタマイズしたい！filter編
### SVGだってドロップシャドウを！
SVGに限った話ではないですが、 ~~憎き~~ IE以外のブラウザでは対応しているfilterというプロパティがあります。
これを使用することによってSVGに影をつけることができます。

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  // drop-shadow(横方法のずれ 縦方向のずれ ぼかし 影の色) 
  filter: drop-shadow(2px 2px 4px #0f2950)
```
**結果**
![スクリーンショット 2019-08-01 20.16.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/b4c03955-eb00-8f3e-f1c0-353be8bf15cd.png)
`box-shadow`のような使い心地です。

### ぼかしたい！
`filter: blur()`を使います。もちろんIEではダメなんですよ…

```sass:svg.sass
svg
  fill: none
  stroke: #04a9f4
  stroke-width: 4
  filter: blur(2px)
```
**結果**
![スクリーンショット 2019-08-01 21.20.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126718/4c1a2eac-9c29-65bd-b6cc-d0aa27cb3d55.png)
ぶれる

## まとめ
思いの外いろんなことが出来ますよね
次回はこの長方形SVGを使ってアニメーションしてみたいと思います！

### 参考
[SVGでアウトラインをカスタマイズしてみよう](url:https://www.webcreatorbox.com/tech/svg-stroke)