html5 – SVG内的MathJax

我正在做一些写作,我用MathJax渲染数学.我也偶尔会包含由JavaScript动态生成的SVG图.那些SVG图偶然包括数学.

我想使用MathJax渲染这些SVG图中的文本元素.我知道如何cause the dynamic math to be rendered.但是,mathjax输出是< span> s,它们是无效SVG,不显示.

当我将MathJax配置为使用SVG输出模式时,这仍然存在,尽管这可能是由于SVG输出模式的不当使用.我改为MathJax CDN链接到http://cdn.mathjax.org/mathjax/2.1-latest/MathJax.js?config=TeX-AMS-MML_SVG,它不产生SVG输出.我还没有能够将MathJax同时实际输出SVG元素.

我考虑过使用SVG< foreignObject>标签是非理想的,因为(据我所知)我必须指定一个宽度和高度,这是不方便的.

有没有更好的方法在HTML内部的SVG中包含MathJax渲染文本？

解决方法

目前,在SVG图中包含MathJax的唯一方法是通过< foreignObject&gt ;.是的,这不是理想的,不仅因为你需要提供一个大小,而且因为IE9不支持< foreignObject&gt ;. 对于SVG输出,如果您已经使用MathJax上下文菜单来选择数学渲染,这将覆盖文档中的渲染器选项,因此您可能仍然看到HTML-CSS输出.该值存储在一个cookie中,以便从会话到会话被记住.您可以删除cookie以删除该设置,或者再次使用MathJax菜单选择SVG渲染. 但是请注意,这不会帮助您,因为MathJax的SVG输出不仅仅是可以包含在更大的SVG文件中的SVG片段,而是包含一些HTML和< svg>元素本身此外,MathJax需要使用周围的HTML来确定要使用的字体大小以及其他一些因素,因此无法将其直接放入SVG图中.

< foreignObject>方法是目前唯一可靠的方式.

编辑：这是一个完整的例子：

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

原文地址：https://www.jb51.cc/html5/168724.html

html5 – SVG内的MathJax

解决方法

相关推荐