Question

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

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;
}

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

Answer 1

首先，Javascript出现了一些问题：

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

您的SVG在课程中没有任何元素＆＃39; hLine＆＃39;。

length = svgPiece.getTotalLength();

＆＃39; svgPiece＆＃39;没有在任何地方定义。

尝试这样的事情：

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; 
}

Demo here - 尽管仍有一些工作要做，以使动画正常工作。

如何在Javascript中设置SVG CSS属性的样式？

1 个答案: