如何拆分含多个<g>标签的大型SVG为独立文件供React组件使用

你的拆分实现思路完全可行，是大型可交互SVG组件的常规维护方案，不需要引入额外第三方库，依靠React原生的组件组合能力即可实现。

• 拆分独立分组组件
  从svgr导出的完整SVG源码中，将每个同级<g>标签的完整内容单独提取为独立函数组件。组件需要支持属性透传，将外部传入的属性直接绑定到根<g>标签上即可。
  以俯仰刻度分组为例，新建PitchScale.jsx文件，代码结构如下：

  const PitchScale = (props) => {
    return (
      // 原<g>自带的静态属性（如fill、stroke、默认class）可以直接写在标签上
      // 后方放置{...props}可以让外部传入的属性覆盖默认静态属性，灵活度更高
      <g fill="#333" stroke="#000" {...props}>
        {/* 这里原样保留原<g>标签内部的所有path、text、line等子元素，不需要做任何修改 */}
      </g>
    )
  }
  export default PitchScale;
  

  按照这个方式，把所有需要单独控制的<g>都拆成独立组件文件即可。

• 组装主容器组件
  主组件只保留根<svg>标签，统一管理SVG的视口、尺寸等全局属性，引入拆分好的所有分组组件，需要做动画控制的属性（如transform、opacity等）直接作为props传给对应分组即可。
  示例代码：

  import PitchScale from './PitchScale';
  import AircraftReference from './AircraftReference';
  import BankAngleBar from './BankAngleBar';
  
  const PitchIndicator = ({ pitchValue, bankValue }) => {
    return (
      <svg width="500" height="500" viewBox="0 0 500 500">
        {/* 公共defs资源（渐变、裁剪路径等）统一放在根svg下最顶部，不要拆分到子组件 */}
        <defs>
          {/* 原SVG中所有defs内的内容原样放在这里 */}
        </defs>
  
        {/* 俯仰刻度组：通过Y轴平移实现俯仰角度动画 */}
        <PitchScale transform={`translate(0, ${pitchValue * 3})`} />
        {/* 飞机参考标识固定在中心，不需要传入变换属性 */}
        <AircraftReference />
        {/* 倾斜刻度组：绕中心旋转实现滚转角度动画 */}
        <BankAngleBar transform={`rotate(${bankValue}, 250, 250)`} />
      </svg>
    )
  }
  export default PitchIndicator;
  

• 原SVG中定义在<defs>标签内的公共资源（渐变、滤镜、裁剪路径等）不要拆分到子组件，统一放在主组件的<svg>标签下最顶部，避免子组件引用失效。
• 手动拆分时不要修改<g>内部元素的id、类名、路径坐标，避免显示错位。如果觉得手动拆分麻烦，也可以修改svgr配置支持按标签自动拆分，但手动拆分逻辑更可控，更适合初学者排查问题。
• 传入transform属性时注意SVG坐标计算规则，旋转的原点坐标要和Inkscape中绘制的画布中心对齐，避免动画偏移。

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