CODEWITHSUNDEEP
javascriptdomsvgcss-transitionssvg-animate
Orun
Orun

Reputation: 4603

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

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?

Upvotes: 0

Views: 6400

Answers (2)

Max
Max

Reputation: 173

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).

Upvotes: 2

Paul LeBeau
Paul LeBeau

Reputation: 101800

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.

Upvotes: 4

Related Questions