html - SVG 对象最初是垂直加载的，然后在浏览器中水平重新排列

Question

我有一堆应该水平相邻放置的 SVG。

html代码:

<svg height="70" width="70" style="position:relative; z-index: 1; margin: -18px;">
  <circle cx="35" cy="35" r="28" stroke="grey" stroke-width="8" fill="none"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="grey" stroke-width="2px" dy=".3em">T</text>
</svg>

<object data="imgs/su.svg" type="image/svg+xml">
  <img src="imgs/su.svg" />
</object>

<svg height="70" width="70" style="position: relative; z-index: 0; margin: -18px;">
  <circle cx="35" cy="35" r="28" stroke="grey" stroke-width="8" fill="none"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="grey" stroke-width="2px" dy=".3em">T</text>
</svg>
.
.
.

我的浏览器是 chrome，最终发生的是 chrome 将每个元素加载到它自己的“ block ”中，从而导致换行，一旦所有元素都加载完毕，然后水平重新排列它们。

这个问题在智能手机上最多需要 2 秒 才能解决，这有点难看。有什么解决办法吗？

Answer 1

正如我之前评论过的，去掉 <object>把你的 svg 图像包装成不必要的，你会没事的:

<svg height="70" width="70" style="position:relative; z-index: 1; margin: -18px;">
  <circle cx="35" cy="35" r="28" stroke="grey" stroke-width="8" fill="none"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="grey" stroke-width="2px" dy=".3em">T</text>
</svg>

<img src="https://upload.wikimedia.org/wikipedia/commons/6/67/Firefox_Logo%2C_2017.svg" width="70" height="70" style="position: relative; z-index: 0; margin: -18px;" />

<svg height="70" width="70" style="position: relative; z-index: 0; margin: -18px;">
  <circle cx="35" cy="35" r="28" stroke="grey" stroke-width="8" fill="none"  />
  <text x="50%" y="50%" text-anchor="middle" stroke="grey" stroke-width="2px" dy=".3em">T</text>
</svg>