SVG pathの長さを取得する方法 & アニメーションのデモ – How to get path length.

この記事は2年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のTipsは【SVG pathの長さを取得する方法 & アニメーションのデモ – How to get path length.】です。見慣れたタイトルですが備忘として書いておきます。この方法を使えば複数のパスの長さでも取得できて便利です。
 


<svg viewBox="0 0 500 500">
<path d="M419.8,65.6L81.2…"/>
</svg>
<script>
$(function(){
$('path').each(function(i){
var $this = $(this);
var path = this;
var len = path.getTotalLength();
// lenがパスの長さです。
});
});
</script>

pathのMethods【getTotalLength】を使用します。この他にも色々便利なMethodsがあります。getPointAtLengthを使えばpathのpolygon/polyline変換が行えます。詳しくはMDN SVGPathElementをご参照ください。

アニメーション例

これだけだとさすがに短いのでpathの長さ取得と合わせたアニメーションの方法です。アニメーションさせたいpathに対してパスの長さ分のstroke-dashoffsetstroke-dasharrayを記述し、任意のタイミングでstroke-dashoffsetを0に指定します。
 


<style>
path{fill:none; stroke:#000;transition:all 0.5s;}
.wrap:hover path{
stroke-dashoffset:0 !important;
}
</style>

<div class="wrap">
<svg viewBox="0 0 500 500">
<path d="M419.8,65.6L81.2…"/>
</svg>
</div>

<script>
$(function(){
$('path').each(function(i){
var $this = $(this);
var path = this;
var len = path.getTotalLength();
$this.css({
'stroke-dashoffset':len,
'stroke-dasharray':len
});
});
});
</script>

デモではwrapをホバーした際にpathのアニメーションが実行されます。