title: SVG line ROTATE transform animation takes a wierd path before reaching destination angle [ Works differently between laptop and extended monitors ]
body: <ul>
  <li>I'm trying to recreate a meter in SVG.</li>
  <li>When trying to rotate a <code>&lt;line&gt;</code> or a <code>&lt;path&gt;</code> using transform and a transition, the line / path takes a wierd route before reaching the destination angle.</li>
  <li>Observed that it works differently between laptop and extended monitors.</li>
  </ul>
  <p>How to fix this ?</p>
  <p><strong>CODEPEN :</strong>   <a href="https://codepen.io/sparkeplug/pen/zYWZxvX" rel="nofollow noreferrer">https://codepen.io/sparkeplug/pen/zYWZxvX</a></p>
  <p><strong>BEHAVIOR IN DIFFERENT MONITORS :</strong></p>
  <p><strong>EXTENDED MONITOR BEHAVIOR :</strong>
  <a href="https://i.stack.imgur.com/HpRCI.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HpRCI.gif" alt="Extended monitor behavior" /></a></p>
  <p><strong>LAPTOP MONITOR BEHAVIOR :</strong>
  <a href="https://i.stack.imgur.com/z0pTT.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z0pTT.gif" alt="Laptop monitor behavior" /></a></p>
  <p>Im expecting the line to rotate with the lines bottom coordinates as transform origin ( like a typical meter ).</p>
  <p><strong>EXPECTED BEHAVIOR SAMPLE IMAGE :</strong></p>
  <p><a href="https://i.stack.imgur.com/neFNb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/neFNb.jpg" alt="enter image description here" /></a></p>