svg 中的方程与 MathJax 方程看起来不一样

Question

我正在尝试编写一个程序来生成显示数学方程的 svg 文件。例如，我想要这个方程在 svg 文件中。该等式中的字体是 EE.SE (MathJax) 上使用的字体。我打算使用的javascript代码是：

const fs = require('fs');

const svgTemplate = `
<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <foreignObject x="10" y="10" width="380" height="80">
    <math class="math" xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <msub><mi>V</mi><mtext>in</mtext></msub>
        <mo>=</mo>
        <mi>cos</mi>
        <mo stretchy="false">(</mo>
        <mi>&#x03C9;</mi>
        <mo>&#x2217;</mo>
        <mi>t</mi>
        <mo stretchy="false">)</mo>
      </mrow>
    </math>
  </foreignObject>
</svg>
`;
fs.writeFileSync('equation.svg', svgTemplate, 'utf8');

console.log('SVG file created successfully.');

它生成一个包含以下方程的 svg 文件：，而我想要 。字体有区别。

如何使字体与MathJax中使用的字体相同？

Answer 1

字体有所不同，因为 MathML 是由浏览器的 MathML 实现而不是 MathJax 处理的。 也许可以使用 CSS 来使用 MathJax 的 v2 字体来设置 MathML 的样式，但我不确定。

将 MathML 包装在 SVG 中这一事实似乎很奇怪。 你想达到什么目的？ 因为这只适用于浏览器已经知道如何渲染 MathML 的设置，而不是直接使用 MathML？ 使用 SVG 包装器，您需要确定

height

和

width

属性，以及

vertical-align

偏移 CSS 样式，以正确定位基线（看看我们帖子中的图像如何尺寸或位置不正确） ）。 请注意，这些值可能与浏览器相关（它们将取决于特定于浏览器的 MathML 实现以及该浏览器使用的字体），因此在某些情况下您可能会出错。 这似乎是一种非常脆弱的方法。

如果您需要以图像格式进行数学计算，为什么不使用 MathJax 来生成 SVG 本身呢？ 然后您将获得所需的字体（并且已经为您计算了

height

、

width

和

vertical-align

）。 例如，您可以使用

MathJax 节点演示

存储库中的 mml2svg 实现之一来执行此操作。