SVG embedded in HTML overlapping-CodePudding

I converted a PDF file to SVG using pdf2svg. I embedded all the SVGs inside a HTML file. However, some of the pages are overlapping/overlaying and the text not properly displayed. When I preview each SVG directly on browser, it displays properly.

Any suggestions to fix the display?

<p  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>

CodePudding user response：

You 3 svgs contain non-unique symbol ids.
These symbols are used to define glyphs/characters that are placed as <use>elements to display text (actually converted to paths).
Since every svg page has its own array of symbols characters can't be mapped correctly when all svgs are concatenated:

<use x="176.796" y="580.6" xlink:href="#glyph0-1"/>
on page 3 will take the first symbol definition (from page 1) – text display will go haywire.

As a workaround you could just place your 3 svgs as seperate files like so:

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

Otherwise you could prefix the glyph ids via search-replace for each svg like this:

glyph0-1 replace with p1glyph0-1