svg - 在 SVG 文件中渲染 MathJax

标签 svg mathjax

我花了几天时间在以下内容上没有任何乐趣。

我希望在 SVG 文件中呈现 Mathjax。我使用来自 https://groups.google.com/forum/#!topic/mathjax-users/_UMt3C7TIpQ/discussion 的示例中的 foreignObject 将它包含在 svg 元素的 html 文件中没有问题。 ,但我无法让它在 svg 文件中工作。

我正在尝试的代码如下:-

<svg width="1960" height="1080" xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript" src="MathJax-master/MathJax.js?config=TeX-AMS_HTML-SVG"></script>
<g>
<title>Layer 1</title>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="50" id="svg_1" y="223" x="636" stroke-opacity="0.8" stroke-width="0" stroke="#007FFF" fill="#000000">Hello World</text>
<foreignObject x="100" y="100" width="100" height="100">
   <body xmlns="http://www.w3.org/2000/svg">
     <div>
       \(\displaystyle{x+1\over y-1}\)
     </div>
   </body>
 </foreignObject>
</g>
</svg>

任何帮助将非常感激。我确实怀疑问题出在声明 body 元素的行上。

最佳答案

一个 <div>标签是 html 所以 <body>标签应该在 html 命名空间 xmlns="http://www.w3.org/1999/xhtml"而不是 svg 命名空间。

您的另一个错误是您对脚本标记使用了 html 语法。 SVG 脚本标签使用 xlink:href 而不是 src 属性。修复使我们来到这里:

<svg width="1960" height="1080" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<g>
<title>Layer 1</title>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="50" id="svg_1" y="223" x="636" stroke-opacity="0.8" stroke-width="0" 

stroke="#007FFF" fill="#000000">Hello World</text>
<foreignObject x="100" y="100" width="100" height="100">
   <body xmlns="http://www.w3.org/1999/xhtml">
     <div>
       \(\displaystyle{x+1\over y-1}\)
     </div>
   </body>
 </foreignObject>
</g>
</svg>

但是当我们这样做时,我们遇到了 mathjax 库中的错误。它似乎希望在文档中找到 html 节点(检查 Firefox 错误控制台)。您必须联系 mathjax 开发人员并让他们修复他们的错误以进一步取得进展。

关于svg - 在 SVG 文件中渲染 MathJax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14862410/

相关文章:

line-breaks - 为什么不溢出 ="linebreak"不适用于 MathML?

javascript - 为什么 MathML 代码在单个 HTML 文件上显示不同,但在 Jsfiddle 上却有效? MathJar 用于单一 HTML?

javascript - 使用 Vuejs 2 更新动态 MathJax?

javascript - 过渡期间的火灾事件

css - 如何使 svg 路径悬停区域更大

python - 找不到 PySide SVG 图像格式?

html - 带有 em 的 SVG 高度没有响应

latex - 具有 MathJax 或类似功能的 Virtual Latex 数学键盘

html - 使用 MathML 和 OpenMath 显示数学表达式

css - 使用 SVG 符号隐藏渐变