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在其自己的“块”中加载了每个浏览器，从而导致换行，并且一旦加载了所有项目，然后将它们水平重新排列。

此问题最多需要 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>

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

1 个答案: