外部SVG雪碧图通过<use>引用后无法自定义尺寸问题咨询

刚发现用<use>标签在HTML里引用外部SVG雪碧图确实是个好方案——把所有图标集中在单个文件里按需调用，还能直接操作fill这类属性，比用图片图标灵活多了！不过你遇到的缩放问题确实是个常见的小坑，我来给你拆解下怎么搞定它。

首先得搞清楚为什么普通图片能轻松调尺寸，而<use>引用的SVG会出问题：普通图片（比如<img>）本身自带了默认的尺寸规则，而SVG雪碧图里的图标如果没配置好viewBox，引用时就会出现缩放异常或者显示不全的情况。下面是具体的解决步骤：

1. 给雪碧图里的每个图标配置正确的viewBox #

这是SVG缩放的核心！viewBox定义了图标的坐标系统，确保缩放时不会变形。比如你的图标是24x24的，每个独立图标应该这么写：

<svg id="icon-user" viewBox="0 0 24 24" width="0" height="0">
  <!-- 这里是图标的路径、形状等内容 -->
</svg>

把width和height设为0是为了让雪碧图本身不显示，只作为资源容器。只要viewBox设置正确，后续缩放就有了基准。

2. 在引用时通过外层<svg>设置尺寸 #

别直接给<use>标签加尺寸，有些浏览器对<use>的样式支持不太友好，正确的做法是给包裹<use>的<svg>标签设置样式：

方式一：用类统一控制所有图标 #

<svg class="custom-icon">
  <use href="your-sprite.svg#icon-user"></use>
</svg>

<style>
.custom-icon {
  width: 32px;
  height: 32px;
  /* 还能在这里直接设置fill、stroke等样式，覆盖图标默认样式 */
  fill: #2c3e50;
}
</style>

方式二：内联样式快速调整单个图标 #

<svg width="48px" height="48px">
  <use href="your-sprite.svg#icon-settings"></use>
</svg>

如果图标本身有固定宽高比，你甚至可以只设置width或height其中一个，另一个会自动按viewBox的比例缩放，和普通图片的行为完全一致。

3. 检查雪碧图的根SVG配置 #

你的外部雪碧图的根SVG只需要作为容器存在，不需要设置多余的尺寸，推荐把所有图标放在<defs>标签里，避免加载时意外显示内容：

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <defs>
    <!-- 所有图标都放在这里 -->
    <svg id="icon-user" viewBox="0 0 24 24">...</svg>
    <svg id="icon-settings" viewBox="0 0 24 24">...</svg>
  </defs>
</svg>

按照这几步调整后，你应该就能像调整普通图片一样自由控制SVG图标的尺寸了！

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