So8*_*res 22 html5 svg mathjax
我在做一些写作,我使用MathJax来渲染数学.我偶尔也会包含由javascript动态生成的SVG图表.那些SVG图偶尔会包含数学.
我希望使用MathJax渲染这些SVG图中的文本元素.我知道如何渲染动态数学.但是,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内部将SVJ中包含MathJax渲染文本？
Dav*_*one 10
目前,在SVG图中包含MathJax的唯一方法是通过<foreignObject>.是的,它并不理想,不仅因为你需要提供一个尺寸,还因为IE9 +不支持<foreignObject>.
对于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>