CSS设置SVG尺寸不生效？React下SVGR导入的SVG内部Path不随容器缩放

• 核心触发原因：对应的原始SVG代码本身没有定义viewBox属性。SVG实现内部元素等比缩放的前提是依赖viewBox建立的内部坐标映射系统，缺失该属性时，SVG内部元素的坐标和浏览器CSS像素是1:1绑定的。此时通过CSS修改外层<svg>标签的宽高，本质是缩小了SVG的可视裁切窗口，内部<path>等元素的坐标完全不会同步变化，最终就会出现SVG标签尺寸正常、但图形被裁到可视区外，只剩空白方块的情况。
• 手动添加viewBox仍不生效的常见场景：
  • 手动添加的viewBox坐标范围和实际图形不匹配，加上原SVG导出时自带的冗余背景元素（代码里那个宽582、高402、位置在x=-1/y=-1的无填充rect），导致坐标映射错位，图形偏移到可视区域外。
  • SVGR的默认转换/优化逻辑：默认配置下SVGR会保留原SVG标签上的固定宽高作为组件默认值，部分内置优化规则甚至会把手动添加的viewBox当成冗余属性删掉，导致配置实际没有生效。

• 第一步：修正SVG本身的代码
  • 删除SVG标签上写死的固定width="512" height="512"属性
  • 补上和画布尺寸匹配的viewBox="0 0 512 512"
  • 删掉那个完全冗余的背景rect元素（<rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>），这个元素是设计软件导出时自动生成的隐藏画布占位元素，没有实际渲染价值，还会干扰坐标适配。
• 第二步：调整styled-components的样式配置
  给SVG组件写样式时，不要只设置宽高数值，补上必要属性保证缩放正常：

  .目标SVG类名 {
    width: 需要的目标宽度;
    height: 需要的目标高度;
    display: block;
    /* 防止flex布局下SVG被压缩变形 */
    flex-shrink: 0;
  }
  

• 第三步：规避SVGR的配置坑
  • 确认SVGR内置的SVGO优化规则，没有把viewBox属性当成冗余内容清理掉
  • 如果是图标类的使用场景，可以直接开启SVGR的icon: true配置项，这个配置会自动把SVG的固定宽高替换为1em单位，同时保留正确的viewBox，后续只需要给SVG组件设置font-size就能控制整体尺寸，不会出现缩放失效的问题。

注意：不需要给SVG内部的<path>、<g>等子元素单独设置宽高、transform属性，这些元素的位置和尺寸完全由外层SVG的viewBox和CSS尺寸决定，单独设置反而会打断等比缩放逻辑。

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