svg-path-commanderライブラリを使ってスケール後のパスコマンドを取得してみよう

こんにちわ。nap5です。

今回はsvg-path-commanderライブラリを使ってスケール後のパスコマンドを取得するやり方の一つを紹介します。

svg-path-commanderライブラリはこちらです。

GitHub - thednp/svg-path-commander: ES6+ tools for advanced processing of SVG path data.

このライブラリを使うと、以下のデモ動画のようなエフェクトを達成することができました。リアクションボタン押下後にパスに沿ってstaggerアニメーションをさせている様子です。オリジナルなスケールをもとにダウンスケールからアップスケールへとトランジションさせています。

Loom | Free Screen & Video Recording Software

このライブラリはスケール以外にもいろいろできるので、知っておくと小回りが効いて便利だと思います。今回は簡単にスケールさせたときの挙動をsvg-path-editorで確認したいと思います。

確認に使用したプログラムは以下になります。

import SVGPathCommander from "svg-path-commander";

const path =
  "M 23.6 2 C 20.237 2 17.342 4.736 16.001 7.594 C 14.659 4.736 12 2 8.4 2 C 3.763 2 0 5.764 0 10.401 C 0 19.834 9.516 22.307 16.001 31.633 C 22.131 22.365 32 19.533 32 10.401 C 32 5.764 28.237 2 23.6 2 Z";

console.log(path);

const a = new SVGPathCommander(path).transform({ scale: 0.6 }).toString();
console.log(a);

const b = new SVGPathCommander(path).transform({ scale: 0.8 }).toString();
console.log(b);

const c = new SVGPathCommander(path).transform({ scale: 1.2 }).toString();
console.log(c);

実行結果は以下になります。

1行目がオリジナルなパスコマンドです。
2行目がオリジナルから0.6にダウンスケールしたパスコマンドです。
3行目がオリジナルから0.8にダウンスケールしたパスコマンドです。
4行目がオリジナルから1.2にアップスケールしたパスコマンドです。

$ time node index.js
M 23.6 2 C 20.237 2 17.342 4.736 16.001 7.594 C 14.659 4.736 12 2 8.4 2 C 3.763 2 0 5.764 0 10.401 C 0 19.834 9.516 22.307 16.001 31.633 C 22.131 22.365 32 19.533 32 10.401 C 32 5.764 28.237 2 23.6 2 Z
M20.56 7.9266C18.5422 7.9266 16.8052 9.5682 16.0006 11.283C15.1954 9.5682 13.6 7.9266 11.44 7.9266C8.6578 7.9266 6.4 10.185 6.4 12.9672C6.4 18.627 12.1096 20.1108 16.0006 25.7064C19.6786 20.1456 25.6 18.4464 25.6 12.9672C25.6 10.185 23.3422 7.9266 20.56 7.9266Z
M22.08 4.9633C19.3896 4.9633 17.0736 7.1521 16.0008 9.4385C14.9272 7.1521 12.8 4.9633 9.92 4.9633C6.2104 4.9633 3.2 7.9745 3.2 11.6841C3.2 19.2305 10.8128 21.2089 16.0008 28.6697C20.9048 21.2553 28.8 18.9897 28.8 11.6841C28.8 7.9745 25.7896 4.9633 22.08 4.9633Z
M25.12 -0.9633C21.0844 -0.9633 17.6104 2.3199 16.0012 5.7495C14.3908 2.3199 11.2 -0.9633 6.88 -0.9633C1.3156 -0.9633 -3.2 3.5535 -3.2 9.1179C-3.2 20.4375 8.2192 23.4051 16.0012 34.5963C23.3572 23.4747 35.2 20.0763 35.2 9.1179C35.2 3.5535 30.6844 -0.9633 25.12 -0.9633Z

real    0m0.160s
user    0m0.198s
sys     0m0.021s

svg-path-editorに張り付けて確認したものが以下になります。

スケール処理したパスコマンド

上記画像のファイルもアップしました。ブラウザにドラッグアンドドロップすると確認できると思います。

heart.svg

1.11 KB

ファイルダウンロードについて

ダウンロード

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

FaunaDBを使用したRSSキュレーションミニシステムの構築

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。