css - How to rotate an svg image based on origin using Jquery -


i have following code create svg image of needle( needle in speedometer).

<circle class="needle-center" cx="200" cy="200" r="5"></circle> <path class="needle" d="m 195 198 l 200 100 l 205 202  "></path> <button id="test">click here</button> 

on clicking button i'm trying rotate svg image using jquery function.

  $("#test").click(function () {         $('.needle').css(" transform-origin", "bottom");         $('.needle').attr("transform", "rotate(45)");         }); 

instead of rotating randomly moving away. how can fix this? there better way animate svg? (i'm new svg)

before clicking: enter image description here

after clicking: enter image description here


Comments

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -