Can you use CSS transitions in SVG attributes? How is y2 on the line?

Question

I want to change the attributes of an SVG string and animate the transition to new coordinates.

I use responsejs to change the y2 value in this example:

<line stroke='green' x1='0' y1='50%' x2='100%' y2='25%'> 

to

 <line stroke='green' x1='0' y1='50%' x2='100%' y2='75%'> 

with CSS like

 .myStuff * { transition: all 1s; } 

Is it possible for the CSS transition to work on the y2 attribute? Or is there a way to set string attributes in CSS, for example:

 .myStuff line { y2: 25%; } 

(which, as I know, does not work)

I reviewed the use of javascript, but that adds complexity

I considered using SMIL, but I would have to store the old and new states of y2, and I don't think responsejs allows you to animate an element.

I have considered using transforms in my line element and will go this way if I cannot find a better solution. I want to avoid math and complexity.

Answer 1

Using jQuery .attr() changes "y2" to "75%" , as you see in the script 1 p>

But the hard part is that you want to use transition .

In this case, you should use transform:matrix() :

HTML:

 <svg height="300" width="300"> <line class="first" stroke='green' x1='0' y1='50%' x2='100%' y2='25%'/> </svg> <button id="change">change</button> 

JQuery

 $(document).ready(function(){ $("#button").click(function(){ $(".first").css({ "transform":"matrix(1, 0.6, 0, 1, 0, 0)", "-webkit-transform":"matrix(1, 0.6, 0, 1, 0, 0)", "-ms-transform":"matrix(1, 0.6, 0, 1, 0, 0)" }); }); }); 

CSS

 .first { -webkit-transition-duration: 1s; /* Safari */ transition-duration: 1s; } 

See working violin 2 .

The tip uses some numbers in matrix() that provide your result.