SVG line ROTATE transform animation takes a wierd path before reaching destination angle [ Works differently between laptop and extended monitors ]

Question

I'm trying to recreate a meter in SVG.
When trying to rotate a <line> or a <path> using transform and a transition, the line / path takes a wierd route before reaching the destination angle.
Observed that it works differently between laptop and extended monitors.

How to fix this ?

CODEPEN : https://codepen.io/sparkeplug/pen/zYWZxvX

BEHAVIOR IN DIFFERENT MONITORS :

EXTENDED MONITOR BEHAVIOR :

LAPTOP MONITOR BEHAVIOR :

Im expecting the line to rotate with the lines bottom coordinates as transform origin ( like a typical meter ).

EXPECTED BEHAVIOR SAMPLE IMAGE :

For me its unclear the movement you're expecting. Anyways, maybe try to use CSS `transform-origin` in the line. — L777, Jul 18 '22 at 15:32
@L777 Reopened the question. Observed that this issue occurs in an extended monitor but not in laptop monitor. — Neyo, Jul 19 '22 at 07:03
That's apparently caused by the resolution of the monitor. I can reproduce on my x2 monitor when I zoom out till dPR=1. I guess they get tripped by the transitioning between the SVG unit to the CSS units. Any reason you don't do the whole animation using CSS? You'd win support for FF and Safari as an added bonus: https://codepen.io/_-0-_/pen/WNzpZNL — Kaiido, Jul 19 '22 at 07:45
@Kaiido At this point i'm unsure why i settled with setting transform on SVG attribute directly. Before getting to know about this monitor resolution fiasco, i settled with attribute approach instead of CSS because of dynamic `transform-origin` values. Anyway's its working like a charm now. Thank you. — Neyo, Jul 19 '22 at 07:56
@Kaiido please add your solution as an answer ( rather than comment ), so that i can accept it as an accepted answer. — Neyo, Jul 21 '22 at 09:18
I'd prefer to know more about the bug before I post an answer and I unfortunately lack time to investigate it. You can post a self-answer though. — Kaiido, Jul 21 '22 at 09:23
Your comment above ( to use CSS instead of SVG attributes for animating ) fixes the problem ( bug ). I assume this is the best ( multi browser compatible ) answer. I've verified in firefox and chrome. — Neyo, Jul 21 '22 at 09:33

score 1 · Answer 1 · answered Jul 20 '22 at 12:31

Move the centre of rotation coords out of the transform and set them with a transform-origin property instead.

const btn = document.getElementById("btn");
const meter = document.getElementById("idMeter");
let flag = false;
btn.addEventListener("click", function () {
  console.log("test");
  const angle1 = "79";
  const angle2 = "-48";
  meter.setAttribute("transform", `rotate(${flag ? angle1 : angle2})`);
  flag = !flag;
});

.container {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 20rem;
  width: 100%;
}
.svg {
  border: 1px solid red;
}
.meter {
  transition: all 0.2s ease-in-out;
  transform-origin: 250px 350px;
}

<main class="container">
  <svg class="svg" viewbox="0 0 500 500">
    <g class="meter" id="idMeter">
      <line x1="250" y1="350" x2="250" y2="100" stroke="black" stroke-width="3"></line>
    </g>
  </svg>
  <button id="btn">Animate</button>
</main>

As mentioned in previous comments above, looks like using CSS transforms instead of SVG attributes gives added bonus of browser compatibility along with fixing monitor resolution mismatches while animating. — Neyo, Jul 21 '22 at 09:20

SVG line ROTATE transform animation takes a wierd path before reaching destination angle [ Works differently between laptop and extended monitors ]

1 Answers1