SVG中<use>引用内联图像时width与height属性无效问题咨询

问题背景 #

为避免SVG中重复内联同一图片，我将重复的<image>标签改为在<defs>中定义单个图片资源，再用<use>引用，但遇到<use>上的width和height属性在Chrome/Safari中不生效的问题——只有把尺寸属性移到<defs>里的<image>上才能正常显示，但这样就无法用不同尺寸复用同一资源。

可行方案：用<symbol>包裹图片资源 #

核心思路是用<symbol>标签包裹<defs>中的图片，并为<symbol>设置viewBox属性，这样<use>的width和height就能控制图片的显示尺寸，同时保留资源复用的优势。

示例代码：

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 用symbol包裹图片，viewBox对应图片原始宽高 -->
    <symbol id="file-icon" viewBox="0 0 101 101">
      <!-- 内部image用100%宽高适配symbol的viewBox -->
      <image href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA..." width="100%" height="100%"/>
    </symbol>
  </defs>
  <!-- 用原尺寸引用 -->
  <use x="0" y="144" width="101" height="101" href="#file-icon"/>
  <!-- 用放大一倍的尺寸引用 -->
  <use x="0" y="-144" width="202" height="202" href="#file-icon"/>
</svg>

原理说明 #

• <symbol>的viewBox定义了资源的坐标系统（对应图片的原始宽高），相当于给资源设置了一个“基准画布”。
• 内部<image>用100%宽高，会自动适配<symbol>的viewBox范围。
• 当<use>设置width和height时，相当于把<symbol>的基准画布按指定尺寸缩放显示，内部图片会跟着适配这个缩放比例，从而实现用<use>控制显示尺寸的效果。

其他备选方案（不推荐） #

• 用transform: scale()：通过缩放变换调整尺寸，但需要手动计算缩放比例（比如scale(2)对应放大一倍），且可能需要额外调整位置，不如viewBox方案直观可控。
• 多份<image>定义：为每个需要的尺寸在<defs>中单独定义一份图片资源，但这会回到重复内联的问题，失去优化意义。

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