在JS中获取基于百分比的SVG路径长度的问题

时间:2018-04-17 10:44:00

标签: javascript animation svg

我需要绘制一个全屏SVG路径,但它需要基于所有设备的百分比,但是当我在JS中测量路径长度时,由于路径定义,它只返回400如下:

<path id="path" d="M 0,0 0,100 100,100 100,0 0,0"></path>

我需要测量路径的总长度,以便我可以使用dash-array和dash-offset在一个平滑过渡中绘制它。

这是一个带有示例模型的codepen:https://codepen.io/jaybox325/pen/vjBgMe?editors=1111

甚至可以测量它,因为它在技术上没有绝对长度。

我有一个使用伪元素制作的后备版本,但如果可能的话我想使用SVG!

谢谢!

1 个答案:

答案 0 :(得分:0)

感谢评论中的raul.vila,我设法使用getBoundingClientRect()函数来获取矩形的宽度和高度,并使用这些长度来完美地为该路径设置动画。

此处有更多详情:Get dimension of a path in SVG

相关问题