0

I have the following code to create an SVG image of a needle( something like the needle in a 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 the button i'm trying to rotate the svg image using Jquery function.

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

Instead of rotating it is just randomly moving away. How can i fix this? Is there a better way to animate svg? (i'm new to SVG)

Before clicking: enter image description here

After clicking: enter image description here

Sooraj
  • 9,717
  • 9
  • 64
  • 99
  • 1
    Using jQuery to manipulate svgs will often be quite a pain. For an explanation check my [answer](http://stackoverflow.com/a/29805796/4235784) and the links therein which I posted recently to a similar question. Doing simple manipulations like the ones you posted could instead be done by means of pure JavaScript without the need for any framework. – altocumulus Apr 24 '15 at 22:53
  • Can you specify the center of rotation by setting the `cx` and `cy` in `rotate( [ ])`? – Dayton Wang Apr 24 '15 at 23:01
  • In css i added the following for that particular class it was rotating. transform: rotate(30deg); transform-origin: 100% 100%; But when i tried doing the same through Jquery it is not working: $('.needleset').css("transform", "rotate(30deg)"); $('.needleset').css(" transform-origin", "100% 100%"); – Sooraj Apr 25 '15 at 05:20

0 Answers0