尝试在SVG中使用Mathjax

问题描述

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

<svg height="250" width="450" > 
<line x1="0" y1="200" x2="450" y2="200" style="stroke:rgb(0,0);stroke-width:2" ></line>
<line x1="230" y1="200" x2="230" y2="0" style="stroke:rgb(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>

解决方法

这有效：

<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);stroke-width:2" ></line>
  <line x1="230" y1="200" x2="230" y2="0" style="stroke:rgb(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>

mathjax svg svg svg