无法调整SVG <use>元素大小 求解决方案及解释

一、可行代码实现 #

1. 定义带ViewBox的Symbol #

把十字polygon封装到<symbol>中，必须指定viewBox属性，这是缩放生效的核心：

<svg style="display: none;">
  <symbol id="cross-icon" viewBox="0 0 24 24"> <!-- viewBox需匹配原始polygon的坐标范围 -->
    <polygon points="18.3 5.7 12 12 5.7 5.7 4.3 7.1 10.6 13.4 4.3 19.7 5.7 21.1 12 14.8 18.3 21.1 19.7 19.7 13.4 13.4 19.7 7.1" fill="#000"/>
  </symbol>
</svg>

2. 通过引用并设置尺寸 #

在需要使用图标的位置，用<use>引用symbol，直接给外层<svg>设置width和height为15px即可：

<svg width="15px" height="15px">
  <use href="#cross-icon"/>
</svg>

二、原理说明 #

1. Symbol缺少ViewBox是尺寸失效的核心原因
   如果之前的<symbol>未设置viewBox，SVG无法确定图标的坐标系统范围，浏览器收到<use>的尺寸设置时，无法将原始polygon的坐标映射到新尺寸，导致图标无法按预期缩放。

2. ViewBox的核心作用
   viewBox="x y width height"定义了SVG内部的坐标边界：x/y是坐标原点，width/height是图标的原始宽高范围。当外部<svg>设置宽高后，浏览器会自动将viewBox定义的区域缩放匹配到外部尺寸，实现自适应调整。

3. 的尺寸逻辑
   <use>的尺寸默认继承所在<svg>的宽高，也可以直接给<use>单独设置尺寸，但前提是对应<symbol>必须配置viewBox，否则缩放规则无法触发。

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