はじめに
皆さんSVG使ってますか？そう、あの軽くて何色にも変われるアイツです。
実は私、恥ずかしながら最近までSVGを使う時は fill くらいしか使ってなかったのですが、最近とあるキッカケから fill 以外にもSVGに使えるCSSプロパティがあることを知りました。すごい！今のブラウザ超すごい！！
そんな感動をぜひお伝えしたい、そう思いQiitaで初となる記事を書かせて頂きました🎉
長方形SVGで楽しむ！基本のCSSプロパティ編
今回はただの長方形であるSVGを使いたいと思います。
<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>
結果
何とも綺麗な長方形ですね。
fill
fillはSVGを塗りつぶします。今回は弊社カラーのひとつである#04a9f4を使用します。
svg
fill: #04a9f4
結果
いい水色ですね
stroke
strokeはSVGに枠線をつけます。その際、塗りつぶしが必要なければfill: noneを指定します。
svg
fill: none
stroke: #04a9f4
結果
主張が弱くなりました
stroke-width
stroke-widthは命名から推測できるように枠線の太さを指定します。単位は省略可能で、省略するとpx単位になります。
svg
fill: none
stroke: #04a9f4
stroke-width: 4
結果
少し存在感を取り戻しました
stroke-opacity
stroke-opacityとは…これまた命名通りに枠線の透明度を変えます。
svg
fill: none
stroke: #04a9f4
stroke-width: 4
stroke-opacity: .3
結果
また少しだけ存在感が薄くなりました
stroke-dasharray
線のタイプを指定するプロパティです。border-styleのようですが、点の間隔などは自分で値を指定します。単位は省略可能で、省略するとpx単位になります。
svg
fill: none
stroke: #04a9f4
stroke-width: 4
stroke-dasharray: 12
結果
なにこれかわいい！！😆
borderでは微妙にいい感じには表現できないやつや！
引数に複数値を渡せます
stroke-dasharrayに第二引数を渡すと線の長さと間隔が調整できます！（引数が1つの場合は線の長さと間隔が同じになります）
svg
fill: none
stroke: #04a9f4
stroke-width: 4
stroke-dasharray: 12 24
結果
さっきより間隔が空きました
また、引数を4つに増やすと、第3・4引数は第1・2引数で指定した線の次に別の長さの線を置きます。ちょっと何いってるか自分でも分からないですが、要するに一点鎖線ができます。
svg
fill: none
stroke: #04a9f4
stroke-width: 4
stroke-dasharray: 8 8 20 8
結果
そして一点鎖線ができるということは…二点鎖線もできます！！
svg
fill: none
stroke: #04a9f4
stroke-width: 4
stroke-dasharray: 4 8 4 8 20 8
結果
実際に使う場面に出くわすかどうかはさておき、borderだとこんなに自由自在には作れませんよね
stroke-linejoin
線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。MDN
長方形SVGではそれほど違いが分かりませんでしたので飛ばします😣
とれる値
-
miterデフォルト値 -
round丸くなる -
bevel面取り
stroke-linecap
パスの終端の形状をどうするか決めるそうです。
svg
fill: none
stroke: #04a9f4
stroke-width: 8
stroke-linecap: round
stroke-dasharray: 1 24
結果
roundを利用して女子ウケを狙いに行きました。渡せる値は以下があります
-
buttデフォルト値 -
round丸くなる -
square四角くなる
stroke-dashoffset
線の開始位置を指定できます。
before
分かりやすくするために線の長さを100pxにしましょう。このSVGは縦200px・横300pxなので、それぞれ破線が2個・3個できるはずですね。
svg
fill: none
stroke: #04a9f4
stroke-width: 4
stroke-linejoin: bevel
stroke-dasharray: 100
結果
after
これを50pxずらすとそれぞれの線の半分ぶんずれるので角を覆うような形なります。
svg
fill: none
stroke: #04a9f4
stroke-width: 4
stroke-linejoin: bevel
stroke-dasharray: 100
stroke-dashoffsest: 50
結果
カメラのあれみたい
もう少しカスタマイズしたい！filter編
SVGだってドロップシャドウを！
SVGに限った話ではないですが、 憎き IE以外のブラウザでは対応しているfilterというプロパティがあります。
これを使用することによってSVGに影をつけることができます。
svg
fill: none
stroke: #04a9f4
stroke-width: 4
// drop-shadow(横方法のずれ 縦方向のずれ ぼかし 影の色)
filter: drop-shadow(2px 2px 4px #0f2950)
結果
box-shadowのような使い心地です。
ぼかしたい！
filter: blur()を使います。もちろんIEではダメなんですよ…
svg
fill: none
stroke: #04a9f4
stroke-width: 4
filter: blur(2px)
結果
ぶれる
まとめ
思いの外いろんなことが出来ますよね
次回はこの長方形SVGを使ってアニメーションしてみたいと思います！