Blogブログ

TORAT | 2021.9.17

【CSSだけ】SVGを理解して、ラインアニメーションを実装する

css
Illustrator

SVGファイルの作り方

SVGを表示させるには「SVG形式の画像」もしくは「SVGのソースコード」が必要です。順番に紹介していきたいと思います！

SVG形式の画像の書き出し方法（illustrator）

①オブジェクトをアウトライン化する。（オブジェクト＞パス＞パスのアウトライン）

②ファイル＞書き出し＞書き出し形式を選択し、ファイルの種類をSVGにして保存します。

SVGのソースコードの保存方法（illustrator）

①オブジェクトをアウトライン化する

②オブジェクトを選択した状態で、オブジェクト > コピーを選択する

このようにすることでSVGのソースコードがクリップボードに保存されます！

SVGを表示させる3つの方法

SVGを表示させるには主に以下の3つの方法があります。

１．img要素のsrc属性にsvgファイルを指定する

２．CSSのbackground-imageでsvgファイルを指定する

３．SVG要素を使って直接HTMLに埋め込む

img要素のsrc属性にsvgファイルを指定する

//省略
<img src="img/torat.svg">
//省略

CSSのbackground-imageでsvgファイルを指定する

.svg {
    background-image: url("img/torat.svg");

}

SVG要素を使って直接HTMLに埋め込む

//省略
<svg class="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 90.837 23.579" xml:space="preserve">
<g>
　<path d="M15.959,2.49h-6.75v20.729H6.72V2.49H0v-2.1h15.959V2.49z"/>
　<path d="M36.719,11.58c0,8.04-4.5,12-9.9,12c-5.669,0-9.689-4.47-9.689-11.609c0-7.44,4.23-11.97,9.959-11.97C32.939,0,36.719,4.68,36.719,11.58z M19.739,11.91c0,4.86,2.52,9.6,7.17,9.6c4.709,0,7.2-4.59,7.2-9.81c0-4.59-2.25-9.629-7.14-9.629C21.929,2.07,19.739,7.05,19.739,11.91z"/>
　<path d="M49.408,12.27c1.77,0.57,2.82,2.28,3.36,4.77c0.72,3.3,1.23,5.31,1.68,6.18h-2.58c-0.36-0.66-0.87-2.67-1.47-5.52c-0.66-3.18-1.92-4.59-4.62-4.59h-2.79v10.109h-2.49V0.69c1.41-0.3,3.39-0.48,5.19-0.48c2.97,0,4.92,0.6,6.27,1.86c1.08,0.99,1.71,2.55,1.71,4.26c0,3.03-1.83,4.979-4.26,5.85V12.27z M45.928,11.19c3.18,0,5.22-1.8,5.22-4.56c0-3.39-2.55-4.44-5.339-4.44c-1.35,0-2.31,0.12-2.82,0.24v8.76H45.928z"/>
　<path d="M74.128,23.219h-2.64l-2.46-7.41h-7.95l-2.4,7.41h-2.55l7.56-22.859h2.88L74.128,23.219z M68.518,13.83l-2.25-6.78c-0.48-1.56-0.87-3-1.17-4.35h-0.09c-0.3,1.38-0.72,2.82-1.14,4.26l-2.28,6.87H68.518z"/>
　<path d="M90.837,2.49h-6.75v20.729h-2.49V2.49h-6.72v-2.1h15.959V2.49z"/>
</g>
</svg>
//省略

SVGでアニメーションを作る

次はCSSで動きを付けてみましょう！

SVG要素を使って直接HTMLに埋め込む方法で実装していきます。まず使いこなすためにはプロパティを理解する必要があります。

SVGのプロパティ

fill　塗りの色

fill-opacity　塗りの透明度

stroke　線の色

stroke-width　線の太さ

stroke-opacity　線の透明度

stroke-linecap　線の端の形状

stroke-dashoffset　線の始まり

stroke-dasharray　線の間隔

プロパティはこのように指定します↓↓

See the Pen svg by yokotamaki (@yokotamaki) on CodePen.

今回は塗りの色と、線の色、線の太さを指定しました。

普段使わないプロパティで難しく感じるかもしれませんが簡単に使いこなすことができます！

SVGでアニメーションを実装する

ではさっそくSVGをCSSで動かしてみましょう！（Rerunでアニメーションを見れます）

See the Pen torat_svg by yokotamaki (@yokotamaki) on CodePen.

このようにkeyframesを使うことで簡単にSVGをアニメーションにすることができます！

ですが、線の間隔を指定するstroke-dasharrayプロパティと stroke-dashoffset プロパティががなんで使われているのだろう… と疑問に思いませんか？この疑問を解決するには、stroke-dasharray と stroke-dashoffset を理解する必要があります。

解説

まず、stroke-dasharrayとは何か。下のコードを見てもらえば分かると思いますが、線の間隔です。数値が大きければ大きいほど線の間隔は広がります。（例：10pxをしていすると10pxの線と10pxの間隔ができる）

See the Pen svg-line by yokotamaki (@yokotamaki) on CodePen.

今回のアニメーションの場合「stroke-dasharray: 1000px;」とすることで文字の枠線は、破線ではなく文字全体が線で囲われているように見えます。そして線の始まりを線の間隔と同じ「stroke-dashoffset: 1000px;」と指定することで線が見えないよになります。

図で説明すると、

こんな感じです！

CSSのkeyframes で線の始まりstore-dashoffsetを1000pxから0pxにすることで間隔がなくなり、線が書かれているようなアニメーションになります。SVGのサイズによって周りの線の長さが変わるので気を付けましょう。また、周りの線の長さによってアニメーションのスピードも変わるのでうまく調節しましょう！