SVG の path 要素からは、
getTotalLength
でパスの全長、
getPointAtLength(n)
でパス上の n 地点における位置情報を取得できる。
これができると、複雑な図形の形に沿って Div を配置したり、文字のアウトラインのパスに沿ってペンを動かしたりといったアニメーションを作る際に細かい座標の計算や調整の手間が省ける。
DEMO
Sketch.app で作成した SVG のパスにあわせて Div を這わせてみました
See the Pen lGvin by turusuke (@turusuke) on CodePen.
上記のサイトでは応用デモ、解説が掲載されているので大変参考になりました。
応用例
クリックするとハートのパス上に星を配置したものが現れて、星がバラけるようなデモを作ってみました。
See the Pen HizoD by turusuke (@turusuke) on CodePen.
色々なものに応用できそうです。