SVGのパスを一筆書きのように動かす方法を解説していきます。
今回は、パスを動かすのにJavaScriptのプラグインVivus.jsを使ってSVGを動かす方法を解説していきます。
実装のレベルとしては、高くなく、JavaScriptの基礎知識があれば誰でも実装可能です。
手軽にSVGのパスを動かすことができるようになります。
- SVG画像を動かす方法。
- Vivus.jsの使い方。
- Vivus.jsが動作しない時の解決方法。
Vivus.jsを使ってSVGを動かす！完成イメージ！
See the Pen 【SVG】パスデータを動かす by 1buk1 (@1buk1) on CodePen.
HTMLへインラインで挿入したSVGパスを動かすことができます。
パスの動き方には、いくつかパターンがあるので後述します。
Vivus.jsの導入と設定。
Vivus.jsを導入してきましょう。
- Vivus.jsを読み込ませる。
- 動かすSVG画像のパスをHTMLへインラインで挿入する。
- Vivus.jsを初期化する。
- SVGパスの動作の設定をする。
以上、導入と設定の流れとなります。
Vivus.jsを読み込ませる。
Vivus.jsを読み込ませるには、２つの方法があります。
１つは、CDNによる読み込みと、ファイルを設置して直接読み込ませる方法の２つです。
CDNを使って読み込ませる方法。
CDNは、公式のGit内にCDNの読み込みに使うURLが記載されています。
参考画像のように、公式のGitへ移動→画面内のテキスト検索で「CDN」と検索するとすぐにでてきます。
「jsDelivr CDN」か「CDNJS CDN」を使って読み込ませてください。
<script src="//cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>上記のコードは、「jsDelivr CDN」を使用しています。
ファイルを設置して直接読み込ませる方法。
先ほどと同様に公式のGitへ移動して、参考画像のようにファイルをダウンロードしましょう。
参考画像の中の「download zip」というところから、必要なファイルをダウンロードできます。
ファイルをダウンロードしたら、解凍して、「vivus.min.js」というファイルを探しましょう。
「vivus.min.js」のファイルを使用します。「vivus.js」でも問題ないですが、「vivus.min.js」の方が軽いため、「vivus.min.js」の使用を推奨します。
探せたら、「vivus.min.js」を読み込ませましょう。
<script src="./js/vivus.min.js"></script>パスの指定は、各自ファイルに合わせて変更してください。
ファイルの設置場所に指定はありません。もちろん、他のjsファイルを一緒に格納しても問題ありません。
以上で、Vivus.jsを読み込ませる作業は終了です。
動かすSVG画像のパスをHTMLへインラインで挿入する。
次は、動かしたいSVG画像のパスをHTMLへインラインで挿入します。
画像として読み込ませるとこはしないので、注意してください。
以下、参考のHTMLです。
<div class="wrap">
<svg version="1.1" id="location-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="660.89" height="73.86" viewBox="0 0 660.89 73.86">
<g id="location">
<path d="M10.2,28.91c0-6.14-.19-16.32-.29-18.05-.19-2.5-.67-3.46-3.55-3.46H1.84c-.58,0-.67-.48-.67-.96v-2.11c0-.48.1-.67.67-.67,1.06,0,4.51.29,12.48.29,9.31,0,13.34-.29,14.21-.29.77,0,.86.29.86.77v2.21c0,.48-.19.77-.96.77h-5.76c-2.98,0-3.36.96-3.36,3.74,0,1.25-.29,15.74-.29,22.46v8.26c0,1.63,0,22.37.29,26.3,2.11.19,21.12.38,24.09,0,5.66-.86,11.42-12.38,12.77-16.13.19-.38.38-.58.77-.38l1.54.58c.29.19.29.29.19.86-.29.67-4.13,16.51-4.7,19.1-1.25-.1-8.74-.19-17.28-.19-8.54-.1-17.95-.1-23.13-.1-3.74,0-6.53.1-8.54.1-1.92.1-3.07.19-3.74.19s-.77-.19-.77-.67v-2.4c0-.48.1-.67.67-.67h4.61c3.55,0,4.13-1.34,4.13-2.59,0-1.82.29-25.73.29-31.58v-5.38Z"/>
<path d="M97.07,67.12c-6.82-4.13-14.11-14.49-14.11-28.51,0-5.86,1.54-14.98,8.93-23.9,8.45-10.27,17.95-12.19,26.01-12.19,6.05,0,13.92,1.25,21.5,7.58,7.01,6.05,13.15,15.45,13.15,28.7,0,7.01-2.21,14.3-7.2,21.02-5.86,7.78-14.4,13.54-27.65,13.54-4.7,0-13.06-1.54-20.64-6.24ZM143.15,39.57c0-21.02-14.97-33.41-25.63-33.41-1.44,0-7.97-1.15-15.17,5.66-6.43,6.14-9.6,15.84-9.6,23.71,0,25.25,17.57,34.17,25.73,34.17,21.12,0,24.67-21.6,24.67-30.14Z"/>
<path d="M192.21,64.53c-6.91-6.53-10.27-17.66-10.27-26.88s2.88-18.14,9.79-25.44c4.9-5.18,13.53-9.7,24-9.7,8.74,0,15.93,3.26,19.39,5.28,1.25.77,1.73.67,1.92,0l.77-2.78c.19-.58.38-.58,1.25-.58s1.06.19,1.06,1.54c0,1.82,1.92,15.94,2.4,18.62.1.48,0,.86-.38.96l-1.44.38c-.48.1-.67,0-.96-.77-1.34-3.17-3.46-7.78-7.49-11.9-4.03-4.13-9.12-7.39-16.7-7.39-17.18,0-24.09,15.26-24,29.28,0,5.57,1.73,16.41,9.21,24.67,6.53,7.3,12,8.06,18.43,8.06,10.85,0,19.29-5.95,23.71-12.19.29-.48.48-.58.77-.29l1.25.96c.29.19.48.38.19.86-5.76,8.35-15.07,16.13-28.61,16.13-11.33,0-18.53-3.55-24.29-8.83Z"/>
<path d="M286.29,45.23c-.96,2.4-6.24,16.99-6.72,19.01-.1.67-.29,1.63-.29,2.11,0,1.34,1.15,2.11,3.26,2.11h4.51c.67,0,.96.19.96.67v2.21c0,.67-.29.86-.77.86-1.34,0-5.28-.29-10.94-.29-7.01,0-9.12.29-10.46.29-.48,0-.67-.19-.67-.77v-2.3c0-.48.38-.67.77-.67h3.36c2.88,0,4.22-1.34,5.57-4.42.67-1.54,7.68-19.29,10.46-27.17.67-1.92,8.45-22.56,9.31-25.15.29-.96.77-2.21.1-3.26-.29-.38-.67-.86-.67-1.25,0-.29.19-.67.86-.86,2.69-.58,6.91-3.46,7.97-4.8.48-.48.77-.86,1.25-.86.58,0,.77.58,1.06,1.63,1.82,6.05,9.31,27.55,11.13,33.69,2.21,7.49,8.45,25.34,9.79,28.13,1.63,3.17,4.13,4.32,6.53,4.32h3.17c.58,0,.77.29.77.67v2.4c0,.48-.29.67-.96.67-1.73,0-3.74-.29-11.52-.29s-11.33.29-13.54.29c-.48,0-.77-.29-.77-.86v-2.21c0-.58.29-.67.86-.67h2.4c2.69,0,3.55-.96,2.88-3.65-.77-3.46-4.7-15.74-6.05-19.58h-23.61ZM308.75,41.78c-.86-2.88-8.64-26.88-9.12-28.32-.29-.67-.48-1.34-.77-1.34-.38,0-.77.67-1.06,1.44-.48,1.25-9.6,25.82-10.27,28.22h21.21Z"/>
<path d="M376.14,7.41h-2.4c-3.07,0-11.42,0-15.17,1.15-4.32,1.34-7.2,8.06-8.54,11.14-.19.48-.48.58-.96.48l-1.73-.48c-.29-.1-.58-.19-.38-.77.96-3.46,4.32-15.84,4.51-16.89.19-1.25.58-1.54.96-1.54.48,0,.77.1,1.15.38l1.25.86c1.73,1.25,2.69,1.54,5.47,1.63,5.09.19,9.12.58,18.14.58h4.61c10.46,0,14.59-.38,19.29-.58,2.11-.1,3.36-.38,4.99-1.34l1.82-1.15c.48-.29.77-.38,1.15-.38.48,0,.67.29.86,1.54.19,1.15,2.02,13.05,2.78,17.28.1.48-.1.67-.58.77l-1.54.38c-.38.1-.48,0-.77-.67-.77-1.82-3.65-9.22-6.82-10.75-2.88-1.44-11.9-1.63-16.61-1.63h-2.69v27.36c0,1.34,0,28.22.1,29.85.19,2.4.96,3.84,3.26,3.84h6.05c.86,0,.96.29.96.96v2.02c0,.48-.1.77-.96.77-.96,0-4.03-.29-13.44-.29s-13.25.29-14.59.29c-.77,0-.86-.38-.86-.96v-1.82c0-.67.1-.96.67-.96h6.53c1.92,0,3.07-1.15,3.17-2.3.29-2.78.29-32.25.29-34.08V7.41Z"/>
<path d="M448.62,31.7c0-2.3-.29-19.58-.38-21.02-.19-2.3-1.15-3.26-4.8-3.26h-5.57c-.48,0-.77-.19-.77-.58v-2.59c0-.38.29-.58.67-.58,1.15,0,6.05.29,14.97.29s11.62-.29,12.96-.29c.48,0,.67.29.67.67v2.4c0,.48-.29.67-.77.67h-4.51c-1.92,0-3.36.77-3.36,2.69,0,.96-.29,22.17-.29,23.33v7.39c0,.96.29,23.13.29,24.19,0,2.98,1.44,3.46,4.51,3.46h3.94c.48,0,.77.19.77.67v2.5c0,.38-.29.58-.86.58-1.15,0-4.99-.29-13.34-.29-9.12,0-13.25.29-14.3.29-.48,0-.77-.19-.77-.58v-2.59c0-.38.29-.58.77-.58h5.38c1.92,0,3.94-.29,4.32-2.78.19-1.44.48-22.17.48-27.26v-6.72Z"/>
<path d="M508.72,67.12c-6.82-4.13-14.11-14.49-14.11-28.51,0-5.86,1.54-14.98,8.93-23.9,8.45-10.27,17.95-12.19,26.01-12.19,6.05,0,13.92,1.25,21.5,7.58,7.01,6.05,13.15,15.45,13.15,28.7,0,7.01-2.21,14.3-7.2,21.02-5.86,7.78-14.4,13.54-27.65,13.54-4.7,0-13.06-1.54-20.64-6.24ZM554.79,39.57c0-21.02-14.97-33.41-25.63-33.41-1.44,0-7.97-1.15-15.17,5.66-6.43,6.14-9.6,15.84-9.6,23.71,0,25.25,17.57,34.17,25.73,34.17,21.12,0,24.67-21.6,24.67-30.14Z"/>
<path d="M600.97,16.44c0-5.66-2.88-8.83-6.34-8.93l-3.94-.1c-.48,0-.58-.38-.58-.67v-2.5c0-.38.1-.58.58-.58s1.25.1,2.69.1c1.44.1,3.55.19,6.82.19s5.28-.19,6.43-.19c1.25,0,2.02.38,2.78,1.25l20.16,26.11c1.06,1.34,17.28,21.21,19.58,24.29h.38v-11.42c0-8.54-.1-13.25-.29-18.05-.1-3.74-.58-13.15-1.15-14.78-.77-2.4-2.59-3.74-5.28-3.74h-3.07c-.38,0-.58-.19-.58-.67v-2.5c0-.38.19-.58.58-.58,1.34,0,4.42.29,10.56.29,5.76,0,8.06-.29,9.31-.29.67,0,.77.29.77.67v2.4c0,.38-.19.67-.58.67h-2.59c-2.59,0-3.55,1.63-3.74,5.28-.38,6.43-.38,15.93-.38,22.17v35.9c0,1.34-.1,2.3-.48,2.3-1.15,0-2.02-1.15-2.3-1.54l-11.71-14.78c-6.72-8.35-13.73-17.18-14.3-17.76-1.06-.96-18.72-23.13-19.29-23.9h-.58v21.31c0,8.93.77,24.57.96,26.49.38,3.74.96,5.57,3.55,5.57h2.88c.67,0,.77.29.77.86v2.11c0,.58-.1.77-.77.77-.96,0-6.72-.29-9.31-.29-2.02,0-8.64.29-9.6.29-.38,0-.48-.19-.48-.67v-2.5c0-.29.1-.58.58-.58h3.26c2.78,0,3.84-1.15,4.32-5.86.19-1.82.38-12.77.38-29.85v-16.32Z"/>
</g>
</svg>
</div>SVGのパスをコピーして貼り付けたら、以下の点を注意して記述の内容を確認してください。
- <g>タグにIDを付与する。
- width と heightを指定する
- viewboxの数値の指定があるか。
- <path>タグについた不要なクラスは削除する。
以上です。
IDの付与は、忘れずに行ってください。
付与したIDを参照してVivus.jsが対象を指定します。
Vivus.jsを初期化する。
Vivus.jsを使用するには、まず「初期化」という作業が必要です。
new Vivus('location',{},function (){});locationとなっている部分に先ほど指定したIDを付与します。
SVGパスの動作の設定をする。オプションの種類。
最後にSVGパスの動作を指定していきます。
const animType = 'delayed';
const animSpeed = 100;
const options = {
type: animType, //アニメーションのタイプ
duration: animSpeed, //アニメーションの時間
forceRender: false, //パスが更新で再レンダリングさせない
}以下、オプションです。
| オプション | 内容 |
| type | タイプを指定する。 |
| start | 動作の条件を指定する。 |
| duration | 動作の長さを指定する。 |
| delay | 「最初のパス」と「最後のパス」の動作の間隔の時間を指定する。 |
オプションの指定方法は、後述していきます。
typeの指定でアニメーションタイプを指定する。
アニメーションのタイプを指定していきます。
| type | 動作 |
| delayed（デフォルト） | 全てのパスがずれて動きだす。 |
| sync | 全てのパスが同時に動き出して、同時に終了する。 |
| oneByOne | パスが１つずつ動き出す。 |
durationでアニメーションの時間を調整する。
アニメーションの時間を指定します。
指定方法は、数値を入力するだけです。
typeにより、同じ数値でも終了までの時間が全く違うので、時間はtypeによって動作を確認しながら設定してみてください。
startで動作の条件を指定する。
| start | 動作 |
| inViewport（デフォルト） | 監視対象の要素がビューポート内に入ったら開始される。 |
| manual | 動作のメソッドを設定して動作を開始する。 |
| autostart | 即時開始 |
デフォルトが「inViewport」なので、こちらのオプションは特に指定することもないかと思います。
「manual」は私も使ったことがないので、使用してみたら使い方を追記していきたいと思います。
delayでパスの動作を調整する。
durationでアニメーションの時間を調整しましたが、durationはあくまでも全体のアニメーションの長さです。
delayをつかうことで、アニメーションの動作に変化を加えることができます。「delayed」や「sync」のときに設定すると効果的です。
Vivus.jsが動作しないときの確認・対処方法！
設置したが動作しないときは、以下の内容を確認してみてください。
- 設置したファイルを正しく読み込めているか。
- 記述が間違っていないか。
問題の切り分け方法としては、Webブラウザの検証機能の「コンソール」画面を確認してみましょう。
「Vivus.js」ファイルが見つかりません。など、もととなるファイルが原因のエラーが表示されていた場合は、「１、設置したファイルを正しく読み込めているか。」をもう一度確認してみてください。
記述部分にエラーが出ている場合は、「２、記述が間違っていないか。」を確認して、記述した内容に誤りがないか確認しましょう。
設置したファイルを正しく読み込めているか。
まず、動作不良の原因として考えられるのは、ファイルの読み込みです。
ファイルの読み込みは、Vivus.jsの初期化（設定など含む）の記述の前にVivus.jsのファイルを読み込まれていない可能性が高いです。
必ず、ファイルの読み込み→記述の順番になるようにしましょう。
ファイルの読み込みは、CDNでもダウンロードでも同じです。
<script src="//cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>
const animType = 'sync';
const animSpeed = 75;
const addClass = 'done';
const options = {
type: animType, //アニメーションのタイプ
duration: animSpeed, //アニメーションの時間
forceRender: false, //パスが更新で再レンダリングさせない
}
new Vivus('location',{...options},function (obj) {obj.el.classList.add(addClass);});Vivus.jsの記述が間違っていないか。
記述は間違っていないか確認しましょう。
オプションの記述は、正しく書かれているか。
「,」「{}」などは正しく使われているか。
もう一度、確認してみましょう。