SVG渲染公式与MathJax公式字体不一致问题解决

我正在编写一个生成显示数学公式的SVG文件的程序，希望SVG文件中呈现的公式和EE.SE（使用MathJax）所用的字体完全一致。但目前用以下JavaScript代码生成的SVG，公式字体和期望效果存在明显差异：

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.');

方法1：在SVG中嵌入MathJax字体并指定样式 #

SVG的foreignObject默认使用系统字体渲染MathML，而MathJax依赖专门的数学字体（如STIX Two Math、Latin Modern Math），需要手动引入字体并指定样式：

修改后的SVG模板如下（以STIX Two Math为例，需替换为base64编码的字体文件内容）：

const fs = require('fs');

const svgTemplate = `
<svg width="400" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style type="text/css">
      @font-face {
        font-family: 'STIX Two Math';
        src: url(data:font/woff2;base64,[你的STIX Two Math字体base64编码]) format('woff2');
        font-weight: normal;
        font-style: normal;
      }
      .math {
        font-family: 'STIX Two Math', serif;
        font-size: 24px;
      }
    </style>
  </defs>
  <foreignObject x="10" y="10" width="380" height="80">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <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>
    </div>
  </foreignObject>
</svg>
`;
fs.writeFileSync('equation.svg', svgTemplate, 'utf8');

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

• 注意：需要将[你的STIX Two Math字体base64编码]替换为实际的字体文件base64内容（可通过在线工具将woff2格式的STIX Two Math字体转换为base64）。
• 添加<div xmlns="http://www.w3.org/1999/xhtml">包裹MathML，确保样式能正确应用。

方法2：直接用MathJax API生成SVG（最可靠） #

放弃手动编写MathML+foreignObject，直接调用MathJax的Node.js API生成SVG，完全复用MathJax的渲染逻辑和字体：

1. 安装依赖：

npm install mathjax-full

2. 编写生成代码：

const fs = require('fs');
const { mathjax } = require('mathjax-full/js/mathjax.js');
const { TeX } = require('mathjax-full/js/input/tex.js');
const { SVG } = require('mathjax-full/js/output/svg.js');
const { liteAdaptor } = require('mathjax-full/js/adaptors/liteAdaptor.js');
const { RegisterHTMLHandler } = require('mathjax-full/js/handlers/html.js');
const { AssistiveMmlHandler } = require('mathjax-full/js/a11y/assistive-mml.js');

// 初始化MathJax
const adaptor = liteAdaptor();
RegisterHTMLHandler(adaptor);
AssistiveMmlHandler(adaptor);

const tex = new TeX({ packages: ['base'] });
const svg = new SVG({ fontCache: 'none' });
const html = mathjax.document('', { InputJax: tex, OutputJax: svg });

// 输入TeX格式的公式
const texFormula = 'V_{\\text{in}} = \\cos(\\omega \\ast t)';
const node = html.convert(texFormula, { display: false });

// 生成SVG字符串
const svgString = adaptor.outerHTML(node);

// 保存到文件
fs.writeFileSync('equation.svg', svgString, 'utf8');
console.log('SVG file created successfully.');

• 此方法直接生成MathJax渲染的SVG，字体、排版完全和EE.SE一致，无需手动处理字体问题。

内容的提问来源于stack exchange，提问作者Carl