SVG 嵌入 HTML 重叠

Question

我使用 pdf2svg 将 PDF 文件转换为 SVG。我将所有 SVG 嵌入到 HTML 文件中。但是，某些页面 overlapping/overlaying 并且文本显示不正确。当我直接在浏览器上预览每个 SVG 时，它都能正常显示。

有什么修复显示的建议吗？

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="xxpZoMa" data-preview="true" data-editable="true" data-user="andychukse" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/andychukse/pen/xxpZoMa">
  SVGHTML</a> by Andy (<a href="https://codepen.io/andychukse">@andychukse</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Answer 1

您的 3 个 svg 包含 non-unique 个符号 ID.
这些符号用于定义 glyphs/characters 作为 <use> 元素放置以显示文本（实际转换为路径）。
由于每个 svg 页面都有自己的符号数组，因此当连接所有 svg 时，字符无法正确映射：

<use x="176.796" y="580.6" xlink:href="#glyph0-1"/>
第 3 页将采用第一个符号定义（来自第 1 页）– 文本显示将变得混乱。

作为解决方法，您可以将 3 个 svg 作为单独的文件放置，如下所示：

<div class="page-1">
  <img src="page1.svg" width="612pt" height="792pt">
</div>

否则，您可以通过 search-replace 为每个 svg 添加字形 ID 前缀，如下所示：

glyph0-1 替换为 p1glyph0-1

SVG 嵌入 HTML 重叠

SVG embedded in HTML overlapping

html

svg