Help with Offset issue when animating with AnimateTransform Rotate

[pablopitty]

I am currently working on refining animations for a future release of my first watchface. My brother and I noticed when executing the AnimationTransform for rotating to certain angles shows a slight offset. We believe it is due to the animation moving the shape in an offset position, but we haven't figured a way to align the necessary shapes when animating, any suggestions?

Below is the code snippet as well as a screenshot.

<svg viewport-fill="white">
<g transform="translate(50%,50%)">
<animateTransform attributeType="rotate" from="360" to="180" dur="3" easing="ease-in-out" begin="load" />
<line x1 ="0" y1="0" x2="0" y2="50" stroke-width= "5" />
</g>
<g transform="translate(50%,50%)">
<animateTransform attributeType="rotate" from="180" to="360" dur="3" easing="ease-in-out" begin="load" />
<line x1 ="0" y1="0" x2="0" y2="50" stroke-width= "5" />
</g>
</svg>

[SunsetRunner]

Hi @pablopitty , I assume you need to set your line's x1,x2 to -strokeWidth/2 inside the <g> (if I understood you problem correct).

Otherwise it gets rotated around its left bottom corner

[pablopitty]

Thanks Barb, I will try and will report back.

[SunsetRunner]

Oh, that was a bad suggestion. This only applies on other element types. Sorry.

The problem might be, that the screen doesn't have a real center x,y

You might try to set your strokeWidth to an even value or set the coords of your <g> to a fix value (168,168) instead of percentage. Just a guess