I'm developing a graph of sorts with a number of spokes. These spokes originate from a concentric ring around the center of a circle and rotate along the circle as their data value changes. They're not animated yet so value updates are sudden and janky. I'm in the process of porting this (and others) to Motion but run into the limitation that Motion doesn't allow setting a transform origin with "global" coordinates or by referring to some other element but only with reference to the element's own bounding box.
For example, I have a line with coordinates x1={50} y1={10} x2={50} y2={40} inside of a circle with radius r={50}. I want this line to rotate around the center of the circle, so the x={50} y={50} point. However, since Motion only takes 0..1 as originX/originY values referring to the line's own bounding box, I have to do some calculation just how far the pivot point extends beyond the line, keeping in mind the actual length of the line at that time. This simplified example would result in a originY of about 1.2 which isn't overly complex but there are other cases in my graph that would become a lot more involved
It would be so much more flexible if I could set actual coordinates as the originX/originY values, especially on large scale SVG canvases. More broadly speaking, for regular DOM elements you could consider passing the position of some other arbitrary DOM element as well.
I'm developing a graph of sorts with a number of spokes. These spokes originate from a concentric ring around the center of a circle and rotate along the circle as their data value changes. They're not animated yet so value updates are sudden and janky. I'm in the process of porting this (and others) to Motion but run into the limitation that Motion doesn't allow setting a transform origin with "global" coordinates or by referring to some other element but only with reference to the element's own bounding box.
For example, I have a line with coordinates
x1={50} y1={10} x2={50} y2={40}
inside of a circle with radiusr={50}
. I want this line to rotate around the center of the circle, so thex={50} y={50}
point. However, since Motion only takes0..1
as originX/originY values referring to the line's own bounding box, I have to do some calculation just how far the pivot point extends beyond the line, keeping in mind the actual length of the line at that time. This simplified example would result in a originY of about 1.2 which isn't overly complex but there are other cases in my graph that would become a lot more involvedIt would be so much more flexible if I could set actual coordinates as the originX/originY values, especially on large scale SVG canvases. More broadly speaking, for regular DOM elements you could consider passing the position of some other arbitrary DOM element as well.