SVG pathの長さを取得する方法 & アニメーションのデモ – How to get path length.
どうもこんばんは。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-dashoffsetとstroke-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のアニメーションが実行されます。