[HOT] How to change an ellipse property under a svg tag using JavaScript ?

Question

Many times in advance we want to animate some vector property the only way we can animate vector is to use <animate> tag but we can dynamically change property of an ellipse using javascript . But all it seems except the style attribute other property can't be refered using javascript such examples are ->> cx ,cy , rx ,ry etc.

Answer 1

//HTML

<svg>
<ellipse cx=0 cy=50 rx=10 ry=10 />
</svg>

//JS

var ell, acc = 0, by = 1;

window.onload = function load() {
ell = document.querySelector("ellipse");
frame();
};

function frame() {
ell.setAttribute("cx", acc += by);
return requestAnimationFrame(frame);
} //frame

Answer 2

ellipse.setAttribute("cx", 100);

//You shouldn't abuse this though... There are reasons we use <animate>

Answer 3

Yes, probably a thing not taught in the tutorials(?)

Answer 4

Hey is it using javascript ?

Answer 5

Please can you write a simple code for this example .

Sololearn doesn't provide the lesson how to change the property of svg using javascript

Answer 6

No I know this but how can I refer the cx attribute using javascript