我创建了一个 SVG 图像，我正在我们的网站中使用它。
SVG 是通过将 XML 插入 HTML 文件来显示的，但是，当这样加载时，SVG 的显示方式与在 img 标签中显示的方式不同。
<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />
我只是想减少以下 SVG 中的行高:
https://jsfiddle.net/fahc2vvq/
我必须加载 XML 版本才能在网站内编辑 SVG，有什么想法吗？
最佳答案
如果你想要一个<foreignObject>要正常运行，您需要包含 <body>元素。
注意:我已从该演示中删除图像以使其更小。
<img src="http://elbrus.ecommercesuite.co.uk/Customisation Tool/SVG Templates/Bookmark.svg" />
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="73mm"
height="150mm"
viewBox="0 0 73 150"
version="1.1"
id="svg4523">
<g
id="layer1"
transform="translate(0,-147)">
<foreignObject
x="15"
y="150"
width="40"
height="60">
<body>
<p id="credit-card-text" style="font-size: 4px;text-align:center;text-anchor:middle;fill-opacity:1;font-weight:bold;line-height: 1;">Customise with your own message here.</p>
</body>
</foreignObject>
</g>
</svg>关于javascript - SVG 文本行高在 img 标签中显示不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44007977/