In my app I procedurally create an SVG with this code:
const AnimatedG = Animated.createAnimatedComponent( G )
const transform = 'translate(63.359 83.424)'
const scale = [ 1, 1.04 ] // [ 1, 1 ]
return <AnimatedG transform={transform} scale={scale}>
{circles.map( ( c, ix ) => <Circle key={ix} {...c}/> )}
</AnimatedG>
Here the scaling applies rather on translate
coords, than on the G's size itself, and the the group is shifted downwards by 4% instead of stretching itself vertically.
What is the proper way of resizing the G? What am I missing?