+ 1

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

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.

21st Dec 2018, 6:30 AM
Atik🇧🇩
Atik🇧🇩 - avatar
6 Respuestas
+ 5
//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
21st Dec 2018, 6:58 AM
Valen.H. ~
Valen.H. ~ - avatar
+ 6
ellipse.setAttribute("cx", 100); //You shouldn't abuse this though... There are reasons we use <animate>
21st Dec 2018, 6:48 AM
Valen.H. ~
Valen.H. ~ - avatar
+ 4
Yes, probably a thing not taught in the tutorials(?)
21st Dec 2018, 6:51 AM
Valen.H. ~
Valen.H. ~ - avatar
0
Hey is it using javascript ?
21st Dec 2018, 6:50 AM
Atik🇧🇩
Atik🇧🇩 - avatar
0
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
21st Dec 2018, 6:52 AM
Atik🇧🇩
Atik🇧🇩 - avatar
0
No I know this but how can I refer the cx attribute using javascript
21st Dec 2018, 6:56 AM
Atik🇧🇩
Atik🇧🇩 - avatar