How do I set the style of SVG CSS attributes in Javascript?

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?

Paul LeBeau · Accepted Answer · 2014-05-21T03:32:33.370

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.

score 1 · Answer 2 · answered Nov 14 '21 at 18:43

1

You can always also just fix the path length by setting pathLength (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pathLength) to a value (like 100 for easy percent-based modification).

answered Nov 14 '21 at 18:43

Max

153
1
6

How do I set the style of SVG CSS attributes in Javascript?

2 Answers2