使用<use href>引用SVG时出现0x0尺寸问题求助

核心原因 #

当使用<use>引用外部SVG symbol时，浏览器需要明确的尺寸参考来渲染内容。你的情况中，两个关键问题导致<use>元素尺寸为0x0：

1. 外部SVG的根<svg>元素缺少尺寸定义，浏览器无法正确识别内部symbol的渲染边界；
2. HTML中的主SVG元素没有设置viewBox，无法配合CSS的width/height正确缩放引用的symbol内容。

解决办法 #

办法1：修正外部SVG的根元素

给外部icons.svg的根<svg>添加隐藏属性和尺寸定义，确保浏览器能正确解析内部symbol：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0" style="display: none;">

    <symbol id="icon-star" viewBox="0 -3.5 28 28" width="49" height="30">
        <!-- 原path代码保持不变 -->
    </symbol>
</svg>

• width="0"/height="0"：避免根SVG占用空间
• style="display: none;"：彻底隐藏根SVG，只暴露内部symbol供引用
• 保留根SVG的xmlns命名空间，确保浏览器正确识别SVG格式

办法2：给HTML中的主SVG添加viewBox

在HTML里的<svg>元素上添加对应symbol的viewBox属性，让主SVG明确知道引用内容的渲染范围：

<span class="service__card-location-icon">
  <svg class="icon" viewBox="0 -3.5 28 28">
    <use href="images/icons.svg#icon-star" />
  </svg>
</span>

这样即使外部SVG根元素没有尺寸定义，主SVG的viewBox也能配合CSS的width:1em/height:1em正确缩放图标。

额外检查

• 确认images/icons.svg的路径正确：在浏览器开发者工具的Network标签中查看该文件是否成功加载（状态码200）
• 确保浏览器支持SVG symbol引用：现代浏览器均支持，若需兼容旧版IE，需额外使用polyfill（但你直接嵌入能正常显示，说明浏览器版本没问题）

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