gpt4 book ai didi

html - SVG 中的 MathJax

转载 作者:技术小花猫 更新时间:2023-10-29 12:02:09 24 4
gpt4 key购买 nike

我正在做一些写作,我使用 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> .是的,它并不理想,不仅因为你需要提供大小,而且因为 IE9+ 不支持 <foreignObject> .

至于 SVG 输出,如果您使用 MathJax 上下文菜单选择数学渲染,这将覆盖文档中的渲染器选择,因此您可能仍会因此看到 HTML-CSS 输出。该值存储在 cookie 中,以便在不同的 session 中被记住。您可以删除 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>

关于html - SVG 中的 MathJax,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15962325/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com