尝试在 svg 中使用 mathjax答案

【问题标题】：Trying to use mathjax in svg尝试在 svg 中使用 mathjax
【发布时间】：2020-10-12 22:49:45
【问题描述】：

我正在尝试在我的网页中制作 svg 图形。我想用 mathjax 在里面写一个 LaTeX 公式，但它不起作用。这是我的代码，尽管我认为这不是问题。谁能帮我？非常感谢！

<svg height="250" width="450" > 
<line x1="0" y1="200" x2="450" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" ></line>
<line x1="230" y1="200" x2="230" y2="0" style="stroke:rgb(0,0,0);stroke-width:1" />
<path d="M 313 200 A 283 283 0 0 0  230 0 l -200 200 m 100 -100" fill="none" stroke="black" stroke-width="1"/>
<text x="10" y="30" style="fill:blue;font-size:10px">$\sqrt{2}$</text>
</svg>

【问题讨论】：

见stackoverflow.com/questions/14862410/… 根据我回答下面的cmets，mathjax 只是HTML。
@Robert 您在该答案中的示例现在适用于 MathJax v3。
那很好。我想你可以用它来解决你的问题。

标签： svg mathjax

【解决方案1】：

这行得通：

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<svg height="250" width="450" > 
  <line x1="0" y1="200" x2="450" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" ></line>
  <line x1="230" y1="200" x2="230" y2="0" style="stroke:rgb(0,0,0);stroke-width:1" />
  <path d="M 313 200 A 283 283 0 0 0  230 0 l -200 200 m 100 -100" fill="none" stroke="black" stroke-width="1"/>

  <!--text x="10" y="30" style="fill:blue;font-size:10px">$\sqrt{2}$</text-->
  <foreignObject x="10" y="20" width="100" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml">
      $$\sqrt{2}$$
    </div>
  </foreignObject>
</svg>

【讨论】：