Render MathJax to SVG file

I spent several days without joy.

I want to display Mathjax in SVG file. I have no problem including it in html file in svg element using foreignObject from examples at https://groups.google.com/forum/#!topic/mathjax-users/_UMt3C7TIpQ/discussion but I can't get it to work in the svg file.

The code I am trying to do is the following: -

<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>

      

Any help would be much appreciated. I suspect the problem is with the line declaring the body element.

+3


source to share


1 answer


A <div>

tag is html, so the tag <body>

must be in the html namespace xmlns="http://www.w3.org/1999/xhtml"

, not the svg namespace.

Another error is when you are using html syntax for the script tag. SVG script tags use xlink: href instead of the src attribute. The commit that forces us here:



<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>

      

But when we do this, we run into an error in the mathjax library. It seems to be expecting to find html nodes in the document (check the Firefox Error Console). You need to contact the mathjax developers and get them to fix their bug for further progress.

+2


source







All Articles