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

Question

我正在尝试动态确定 SVG 路径数组的长度，然后将此值插入到属性 lines-dasharray 和 lines-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 没有任何带有“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; 
}

Demo here - 尽管还需要做一些工作才能使动画正常工作。