I have an svg line with id=’slope’. I want to change the slope by altering the y1 and y2 values. This works fine:
As expected, the line changes angle so it starts from y=10 and ends at y=30. However, I cannot animate it. This gives me an error claiming that y1 and y2 are read-only attributes:
Is this a bug in jquery or is jquery unable to animate y1 and y2 of a line. I tested this with the cx and cy attributes for circles and it works fine. So, I know that jquery can animate position of svg elements. For some reason, it cannot do lines from what I am seeing.
I am using jquery 3.4.1, in case this is a bug.
The description of JQuery’s animate is:
Description: Perform a custom animation of a set of CSS properties.
Whereas the x and y attributes of an SVG line are exactly that, attributes.
A future specification may convert the ‘x1’, ‘y1’, ‘x2’, and ‘y2’ attributes to geometric properties. Currently, they can only be specified via element attributes, and not CSS.
Somewhat confusingly the SVG 2 specification has made circle’s cx and cy mapped CSS properties rather than attributes. In SVG 1.1 they too used to be attributes.