在SVG文件中渲染MathJax

Question

在SVG文件中渲染MathJax

4

我花了几天时间尝试以下操作，但都没有成功。我想在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元素的那一行上。

- Gavin Simpson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Robert Longson · Accepted Answer

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

你的另一个错误是使用了 script 标签的 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开发人员并让他们修复错误才能进一步进行。