RN-SVG中如何正确缩放G组？当前缩放引发位移而非拉伸

核心问题 #

你当前的代码存在两个关键问题：

1. SVG（或React Native SVG）中没有单独的scale属性，直接给<AnimatedG>添加scale属性无效，且和transform字符串混用会导致变换顺序混乱。
2. 变换顺序错误：当前先执行translate再隐式执行scale，导致平移坐标被缩放，最终出现向下偏移的问题。

正确调整方式 #

方案1：合并变换到transform数组，控制顺序（推荐）

将所有变换统一放到transform数组中，明确先执行缩放、再执行平移（适用于平移坐标基于缩放后元素位置的场景）：

const AnimatedG = Animated.createAnimatedComponent(G)

// 用数组形式定义变换，顺序为先缩放后平移
const transform = [
  { scaleX: 1 },
  { scaleY: 1.04 },
  { translateX: 63.359 },
  { translateY: 83.424 }
]
  
return (
  <AnimatedG transform={transform}>
    {circles.map((c, ix) => <Circle key={ix} {...c}/>)}
  </AnimatedG>
)

方案2：设置变换原点，保留原平移顺序

如果你的平移坐标是针对原始尺寸的元素，不想修改平移值，可以设置transformOrigin为元素中心，让缩放围绕中心进行，避免偏移：

const AnimatedG = Animated.createAnimatedComponent(G)

const transform = [
  { translateX: 63.359 },
  { translateY: 83.424 },
  { scaleX: 1 },
  { scaleY: 1.04 }
]
  
return (
  <AnimatedG 
    transform={transform}
    transformOrigin="center center"
  >
    {circles.map((c, ix) => <Circle key={ix} {...c}/>)}
  </AnimatedG>
)

关键要点总结 #

• 所有SVG变换必须通过transform属性定义，不要混用单独的scale/translate属性和transform字符串，避免顺序歧义。
• SVG变换是按顺序叠加生效的，先执行的变换会被后执行的变换影响，务必根据需求调整顺序。
• 使用transformOrigin可以指定缩放/旋转的原点，避免元素因变换产生不必要的偏移。

内容的提问来源于stack exchange，提问作者injecteer