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

Question

我正在尝试动态确定 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吗？

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

在这里进行演示 - 尽管仍有一些工作要做，以使动画正常工作。

Answer 2

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