SVG中的MathJax [英] MathJax inside SVG
问题描述
我在做一些写作，我使用MathJax来渲染数学。我偶尔也会包含由javascript动态生成的SVG图表。这些SVG图偶尔会包含数学。
I'm doing some writing where I use MathJax to render the math. I also occasionally include SVG diagrams which are generated dynamically by javascript. Those SVG diagrams occasionally include math.
我希望使用MathJax渲染这些SVG图中的文本元素。我知道如何导致动态数学呈现。但是，mathjax输出在< span> s中，这些SVG无效并且不显示。
I'd like the text elements in those SVG diagrams to be rendered using MathJax. I know how to cause the dynamic math to be rendered. However, the mathjax output is in <span>s which aren't valid SVG and don't show up.
当我将MathJax配置为使用SVG输出模式时，这仍然存在，尽管这可能是由于SVG输出模式使用不当造成的。我将MathJax CDN更改为 http://cdn.mathjax.org/mathjax/2.1-latest/MathJax.js?config=TeX-AMS-MML_SVG ，不产生SVG输出。我还没能让MathJax真正输出SVG元素。
This persists when I configure MathJax to use SVG output mode, though this is perhaps due to an improper use of SVG output mode. I changed by MathJax CDN link to http://cdn.mathjax.org/mathjax/2.1-latest/MathJax.js?config=TeX-AMS-MML_SVG, which did not produce SVG output. I haven't been able to coax MathJax into actually outputting SVG elements yet.
我考虑过使用SVG < foreignObject> 标签是非理想的，因为（据我所知）我必须指定宽度和高度，这很不方便。
I've considered using an SVG <foreignObject> tag which is non-ideal because (to my knowledge) I must specify a width and height, which is inconvenient.
有没有更好的方法在HTML里面的SVG中包含MathJax渲染文本？
Is there a better way to include MathJax rendered text inside SVG inside HTML?
推荐答案
目前，在SVG图中包含MathJax的唯一方法是通过< foreignObject> 。是的，它不理想，不仅因为你需要提供一个大小，还因为IE9 +不支持< foreignObject> 。
Currently, the only way to include MathJax within an SVG diagram is through <foreignObject>. Yes, it is not ideal, not only because you need to provide a size, but also because IE9+ doesn't support <foreignObject>.
对于SVG输出，如果您使用MathJax上下文菜单选择数学渲染，那将覆盖文档中的渲染器选项，因此您可能仍会看到HTML-CSS输出原因。该值存储在cookie中，以便在会话之间记住它。您可以删除cookie以删除设置，或再次使用MathJax菜单选择SVG渲染。
As for the SVG output, if you have used the MathJax contextual menu to select a math render, that will override the renderer choice in the document, so you may still be seeing HTML-CSS output for that reason. The value is stored in a cookie, so that it will be remembered from session to session. You can delete the cookie to remove the setting, or use the MathJax menu again to select SVG rendering.
但请注意，这对您无法帮助您，因为MathJax的SVG输出不仅仅是一个可以包含在更大的SVG文件中的SVG片段，而是包含一些HTML和< svg> 元素本身。此外，MathJax需要使用周围的HTML来确定要使用的字体大小等内容以及其他一些因素，因此无法将其直接放入SVG图表中。
Note, however, that this isn't going to help you either, as MathJax's SVG output is not just an SVG snippet that can be included into a larger SVG file, but include some HTML and the <svg> element itself. Moreover, MathJax needs the surrounding HTML to determine things like the font-size to use, and some other factors, so it is not going to be able to placed directly into your SVG diagram.
< foreignObject> 方法目前是唯一可行的方法。
The <foreignObject> approach is really the only reliable way at the moment.
编辑：以下是完整示例：
<!DOCTYPE html>
<html>
<head>
<title>MathJax in SVG diagram</title>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="500">
<circle cx="100" cy="100" r="99" fill="yellow" stroke="red" />
<circle cx="100" cy="100" r="3" fill="blue" />
<foreignObject x="100" y="100" width="100" height="100">
<div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Times; font-size:15px">
\(\displaystyle{x+1\over y-1}\)
</div>
</foreignObject>
</svg>
</body>
</html>
这篇关于SVG中的MathJax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
