如何将自定义SVG形状添加到使用MathJax生成的方程式中?

时间:2018-10-27 19:50:13

标签: javascript html svg mathjax

我想使用MathJax编写包括SVG形状在内的各种方程,如下所示:

(2 * [red box]) + [red box] = [three red boxes]

括号中的每个项目都是HTML中定义的自定义SVG元素,范围从简单(单个框)到更复杂(多个形状)。之所以需要这样做,是因为我想使用MathJax的功能来格式化数学方程式,同时用SVG形状替换一些符号。我可能还需要指定其他HTML。

我怀疑这可以通过使用MathJax的HTML snippets来实现,但是我不知道如何获取他们提供的示例代码并使之适用于任何给定的方程。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

如果您使用的是MathML输入,则可以使用<mglyph>元素在表达式中包含svg图像,如下所示:

<math>
  <mglyph src="dice.svg" height="42px" width="42px" valign="-14px" alt="Dice showing five dots"></mglyph>
</math>

甚至

<math>
  <mglyph src='data:image/svg+xml,
    <svg xmlns="http://www.w3.org/2000/svg" height="42px" width="42px">
      <rect stroke="black" fill="none" x="1px" y="1px" stroke-width="2px" rx="5px" width="40px" height="40px"></rect>
      <circle stroke="black" fill="black" cy="30px" cx="30px" r="5px"></circle>
      <circle stroke="black" fill="black" cy="30px" cx="10px" r="5px"></circle>
      <circle stroke="black" fill="black" cy="20px" cx="20px" r="5px"></circle>
      <circle stroke="black" fill="black" cy="10px" cx="30px" r="5px"></circle>
      <circle stroke="black" fill="black" cy="10px" cx="10px" r="5px"></circle>
    </svg>'
    valign="-14px"
    alt="Dice showing five dots">
  </mglyph>
</math>

如果使用的是TeX输入,则可以使用\mmlToken宏来创建mglyph:

\mmlToken{mglyph}[src="dice.svg" width="42px" height="42px" valign="-14px" alt="Dice showing five dots"]{}

您还可以使用第三方扩展程序库中的"img" extension。这定义了一个\img宏,该宏使加载图像更加容易:

\img[-14px][42px][42px]{dice.svg}

我认为您应该能够使用其中之一来做自己想做的事情。 (这是我对MathJax User's Forum上的交叉帖子的回复)