title: How to rotate an svg image based on origin using Jquery
body: <p>I have the following code to create an SVG image of a needle( something like the needle in a speedometer).</p>
  
  <pre><code>&lt;circle class="needle-center" cx="200" cy="200" r="5"&gt;&lt;/circle&gt;
  &lt;path class="needle" d="M 195 198 L 200 100 L 205 202  "&gt;&lt;/path&gt;
  &lt;button id="test"&gt;Click Here&lt;/button&gt;
  </code></pre>
  
  <p>On clicking the button i'm trying to rotate the svg image using Jquery function.</p>
  
  <pre><code>  $("#test").click(function () {
          $('.needle').css(" transform-origin", "bottom");
          $('.needle').attr("transform", "rotate(45)");
          });
  </code></pre>
  
  <p>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)</p>
  
  <p>Before clicking:
  <img src="https://i.stack.imgur.com/Tr5Il.jpg" alt="enter image description here"></p>
  
  <p>After clicking:
  <img src="https://i.stack.imgur.com/A4SIE.jpg" alt="enter image description here"></p>