Question

我已经花了几天的时间，没有任何快乐。

我希望在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元素的行。

Answer 1

<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文件中渲染MathJax

1 个答案: