加载外部SVG时<use>元素宽高为0的问题及解决问询

这个问题确实挺棘手的——我之前也遇到过类似的<use>元素加载期间尺寸塌陷的问题，尤其是在处理动画或旋转这类依赖元素尺寸的操作时，偶现的时序问题真的很头疼。下面给你几个不用等待资源加载完成就能强制保持<use>元素尺寸的方案：

方案1：用外层SVG容器固定尺寸 #

最稳妥的办法是给<use>套一个带明确宽高的外层<svg>元素，让<use>占满整个容器空间。这样不管内部引用的SVG是否加载完成，外层容器都会保持你设置的尺寸，旋转等操作直接针对外层SVG即可。

示例代码：

<svg width="8" height="8" x="26" y="-4">
  <use xlink:href="/images/checkmark.svg#Layer_1" width="100%" height="100%"></use>
</svg>

外层SVG会立即渲染出指定的8x8尺寸，<use>元素因为设置了100%宽高，会自动填充整个容器，完美避免加载期间的尺寸塌陷。

方案2：用CSS强制锁定最小尺寸 #

你可以通过CSS给<use>元素设置min-width和min-height，强制浏览器在资源加载前就保持指定的尺寸。如果你的<use>是动态生成的，还可以直接把宽高值内联到样式里：

示例CSS：

use[width][height] {
  display: inline-block;
  min-width: attr(width px);
  min-height: attr(height px);
}

或者内联样式的写法：

<use id="SvgjsUse1044" 
     xlink:href="/images/checkmark.svg#Layer_1" 
     width="8" height="8" 
     x="26" y="-4"
     style="display: inline-block; min-width: 8px; min-height: 8px;"></use>

这里设置display: inline-block是为了让<use>元素能正确应用宽高样式，min-width和min-height则确保即使内部内容为空，元素也不会塌陷到0尺寸。

方案3：添加占位 fallback 元素 #

如果上面的方案都不适用，你可以在<use>元素旁边加一个和它尺寸完全一致的透明占位元素（比如<rect>），在外部SVG加载完成前，这个占位元素会维持住尺寸：

示例代码：

<rect width="8" height="8" x="26" y="-4" fill="transparent"></rect>
<use id="SvgjsUse1044" 
     xlink:href="/images/checkmark.svg#Layer_1" 
     width="8" height="8" 
     x="26" y="-4"></use>

注意要把<rect>放在<use>前面，这样当<use>加载完成后，会自动覆盖在占位元素之上，不会影响最终的视觉效果。

为什么<image>不会有这个问题？ #

简单来说，<image>是浏览器专门设计的替换元素，它的行为更像<img>：即使外部资源还没加载，浏览器也会优先使用你设置的width和height作为占位尺寸。而<use>属于SVG的内部引用机制，它依赖于引用内容的DOM结构来计算尺寸——在外部SVG加载完成前，<use>对应的影子DOM是空的，所以浏览器会默认把它的尺寸计算为0。

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