MathJax tex2svg无法输出纯SVG元素，仅生成<mjx-container>求助

核心问题 #

之前用MathJax的tex2svg能生成可复用的SVG，现在要渲染到Canvas时，仅能拿到<mjx-container>容器而非纯SVG路径元素；尝试从<mjx-assistive-mml>下的<math>元素转SVG，生成的data:image/svg+xml加载到HTMLImageElement时会损坏，这是备选方案但存在问题。

有效解决方法 #

1. 直接调用API生成纯SVG字符串

跳过页面渲染后的容器，直接用MathJax的tex2svgPromise接口生成SVG，提取其中的纯SVG元素：

async function generatePureSVG(texExpression) {
  const result = await MathJax.tex2svgPromise(texExpression, {
    display: false, // 按需设置为true（块级）或false（行内）
    em: 16,
    ex: 8,
    containerWidth: 600
  });
  // 直接获取内部的svg元素
  return result.querySelector('svg').outerHTML;
}

得到的SVG字符串可直接转为data URL，用于Canvas渲染。

2. 从已渲染的<mjx-container>提取SVG

如果内容已渲染到页面，直接从<mjx-container>中提取可视化的SVG元素（不是辅助用的<mjx-assistive-mml>）：

// 找到目标容器
const mjxContainer = document.querySelector('mjx-container');
// 获取内部的svg元素
const svgElement = mjxContainer.querySelector('svg');

if (svgElement) {
  // 序列化为SVG字符串
  const svgString = new XMLSerializer().serializeToString(svgElement);
  // 转为可加载的data URL
  const encodedSvg = encodeURIComponent(svgString);
  const dataUrl = `data:image/svg+xml,${encodedSvg}`;
  
  // 加载到Image并渲染到Canvas
  const img = new Image();
  img.onload = () => {
    const canvas = document.getElementById('your-canvas-id');
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
  };
  img.src = dataUrl;
}

MathJax渲染的<mjx-container>内已经包含了用于显示的SVG，辅助MathML是给无障碍工具用的，不要用它来转SVG。

3. 备选方案的修复思路（不推荐）

如果必须用<mjx-assistive-mml>里的<math>转SVG，需要确保转换时包含完整的MathML命名空间和必要样式，比如使用专门的MathML转SVG处理逻辑，但这种方式可靠性远低于直接使用MathJax生成的SVG。

内容的提问来源于stack exchange，提问作者Ath.Bar.