0

我正在尝试动态确定 SVG 路径数组的长度，然后将此值插入到属性的 HTML DOM 样式对象中，stroke-dasharray并且stroke-dashoffset.

var horizontals = document.getElementsByClassName('hLine');
for (var i = 0; i < horizontals.length; i++ ) {
    var drawingComponent = horizontals[i],
        length = svgPiece.getTotalLength();

    horizontals[i].style.strokeDasharray = length;
    horizontals[i].style.strokeDashoffset = length;
}

在此处找到的示例中，所有.hLine路径（所有水平线）都应该设置动画，但它们没有。这是因为strokeDasharray不strokeDashoffset支持吗？

4

2 回答 2

4

首先，该 Javascript 存在一些问题：

var horizontals = document.getElementsByClassName('hLine');

您的 SVG 没有任何具有“hLine”类的元素。

length = svgPiece.getTotalLength();

'svgPiece' 没有在任何地方定义。

尝试这样的事情：

var horizontals = document.querySelectorAll('#horizontal path')

for (var i = 0; i < horizontals.length; i++ ) {
    var path = horizontals[i],
        length = path.getTotalLength();

    path.style.strokeDasharray = length;
    path.style.strokeDashoffset = length; 
}

演示在这里- 虽然仍然需要做一些工作才能使动画正常工作。

于 2014-05-19T06:01:36.783 回答
1

您也可以随时通过将 pathLength ( https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength ) 设置为一个值来修复路径长度（例如 100 以便于基于百分比的修改） .

于 2021-11-14T18:43:37.490 回答