React迁移Vue时SVG图标无法缩小、显示不一致的问题排查

将React应用重构迁移至Vue框架时，遇到SVG图标显示异常问题：React中SVG组件能正常按容器尺寸缩小显示，但Vue中SVG图标无法缩小，二者显示效果存在差异。

React 实现代码 #

// Icon.tsx
const Icon = React.memo(({ fill = 'black' }: Props) => {
  return (
    <div
      className={`icon-wrapper`}
    >
      <svg viewBox='0 0 1000 1000'>
        <path
          d='M990,500L663.3,227.8v163.3H282.2v217.8h381.1v163.3L990,500z M118.9,118.9h435.6V10H118.9C59,10,10,59,10,118.9v762.2C10,941,59,990,118.9,990h435.6V881.1H118.9V118.9L118.9,118.9z'
          fill={fill}
        />
      </svg>
    </div>
  );
});

Vue 实现代码 #

<template>
  <div class="icon-wrapper" :style="{ pointerEvents: 'none' }">
    <svg xmlns="http://www.w3.org/2000/svg" view-box="0 0 1000 1000">
      <path
        d="M990,500L663.3,227.8v163.3H282.2v217.8h381.1v163.3L990,500z M118.9,118.9h435.6V10H118.9C59,10,10,59,10,118.9v762.2C10,941,59,990,118.9,990h435.6V881.1H118.9V118.9L118.9,118.9z"
        :fill="fill"
      />
    </svg>
  </div>
</template>

<script setup lang="ts">
const fill = 'black';
</script>

通用样式（两者一致） #

// General styles
.gallery {
  display: flex;
  justify-content: center;

  .icon-wrapper {
    width: 40px;
  }
}

问题原因 #

核心问题在于Vue组件中SVG的属性写法错误：

• React中使用了SVG规范要求的viewBox属性，该属性定义了SVG的视口范围，是实现矢量图自适应容器缩放的关键。
• Vue组件里错误地将属性写成了view-box，这是一个无效的自定义属性，SVG无法识别它，导致SVG失去自适应缩放能力，只能以原始尺寸渲染，超出了40px的容器范围。

修复方法 #

将Vue模板中的view-box修改为正确的viewBox即可：

<template>
  <div class="icon-wrapper" :style="{ pointerEvents: 'none' }">
    <!-- 修正属性名为 viewBox -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
      <path
        d="M990,500L663.3,227.8v163.3H282.2v217.8h381.1v163.3L990,500z M118.9,118.9h435.6V10H118.9C59,10,10,59,10,118.9v762.2C10,941,59,990,118.9,990h435.6V881.1H118.9V118.9L118.9,118.9z"
        :fill="fill"
      />
    </svg>
  </div>
</template>

补充说明 #

SVG的viewBox属性由四个值组成：min-x min-y width height，它定义了SVG内部的坐标系范围。当容器设置了宽高后，SVG会自动将内部图形缩放到匹配容器的尺寸，保证图形比例不变。如果缺少这个属性，SVG会默认以内部图形的原始尺寸显示，不会响应容器的尺寸变化。

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