I am learning AI and SVG animation. I got the SVG from flaticon. I would like to rotate the pointer around a point and make it look like the gauge is actually working. To achieve this, I need to find the coordinates on the indicator where the bases's midpoint is.
So.:
- I am rotating the pointer
- I know the base's midpoint
- Want to know which (
x
,y
) is the base's midpoint on the indicator (x'
,y'
)
Finding the midpoint on the base is not hard, but how can I translate the coordinate to the pointer? (I will actually need to transform the indicator's coordinate to an x'
and y'
percentage afterwards to be able to make it responsive).
I guess I would need to figure out points a lot of times later, so I would like to be able to find such points fast.
Edit: I actually want to rotate the pointer in my animation (JavaScript). I can reference the pointer using the path's id, but to apply the transformation, I need a transformation origin. Which I cannot measure.