☰

Latex-SVG 根据 html 中的位置显示不同

tag-icon • tag-icon html svg
Latex-SVG 根据 html 中的位置显示不同

更新的问题

dvisvgm 生成的 svg 在放置在 html 文档中时似乎会相互影响。

例如，它看起来应该是这样的： https://jsfiddle.net/y8nq7xnz/1/

另一方面，当我将上面的 svg 移动到另一个 svg 下方时，结果就变得混乱了： https://jsfiddle.net/ubq3n30c/3/

问题：哪些部分有问题？我该怎么做才能避免这种情况再次发生？我考虑将 svg 存储到文件中而不使用内联 svg，但这是我最不喜欢的选项。

感谢您的任何想法。

老问题

前几天我注意到一个非常奇怪的错误。对于我的网站，我想包含由 dvisvgm 渲染的 Latex-SVG。生成的 svg 看起来很好，除非它在 ​​html 中的某些位置。例如：

在 body 标签的正下方，svg 看起来很好 在 body 标签的正下方，svg 看起来很好。

相比之下：

在此处输入图片描述 该图像在页面的其他位置看起来非常糟糕。

我首先怀疑的是 css，但事实并非如此，因为当我在应用了相同样式的区域内移动 svg 时也会发生“正确/错误切换”。

您可以在以下位置找到 svghttps://jsfiddle.net/ubq3n30c/。在 jsfiddle 中它看起来也很好，在我插入它的每个其他页面中也是如此。只是我的页面似乎在某些位置给 latex-svg 带来了困难……

知道这是啥吗？

答案1

我最终没有直接嵌入 svg，而是通过图像标签嵌入，如下所示（在 javascript 中）：

mySvg = '<img src="data:image/svg+xml;utf8,' + mySvg + '">';

这只回答了“我能做什么才能避免这种情况再次发生”的问题，但没有回答“哪些部分存在冲突”。这个我还是不知道。

答案2

我猜问题出在路径 ID 冲突。由于两个 SVG 文件使用相同的 ID，因此当它们组合在单个 HTML 文件中时，它们不再是唯一的。因此，您可能需要对 SVG 文件进行后处理，并在 ID 中添加某种文件标记，例如和，g0-111-0而g0-111-1不是仅g0-111在两个 SVG 中使用。

相关内容