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

Question

I'm trying to dynamically determine the length of an array of SVG paths and then insert this value into the HTML DOM style object for the attributes stroke-dasharray and 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;
}

In the example found here , all the .hLine paths (all the horizontal lines) should animate, but they do not. Is this because strokeDasharray and strokeDashoffset aren't supported?

Answer 1

For a start, there are some things wrong with that Javascript:

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

Your SVG doesn't have any elements with the class 'hLine'.

length = svgPiece.getTotalLength();

'svgPiece' is not defined anywhere.

Try something like this:

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 - although there is still some work to do to get the animation working properly.

Answer 2

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