在A-Frame中渲染MathJax表达式失败，无法获取SVG元素求助

在A-Frame环境中渲染sin{(x+y)}这类MathJax表达式时，执行以下代码返回null：

const svg = document.querySelector('#latexOutput .mjx-chtml');

尝试更换.tex-svg等其他选择器也无法获取到目标元素，相关完整代码如下：

<script type="module">
    import { fetchEnvValues } from '/scripts/fetchEnv.js';

    fetchEnvValues().then(envValues => {
        var latex = envValues[1] || 'x^2 + y^2';  // 使用简单的LaTeX表达式进行错误排查
        var js = envValues[0];

        // 在隐藏的Div中渲染LaTeX输出
        document.querySelector('#latexOutput').innerHTML = `$$${latex}$$`;
        console.log('LaTeX code set:', latex);
        
        // 检查MathJax是否加载完成
        if (typeof MathJax !== 'undefined') {
            console.log('MathJax is loaded');
            // MathJax已加载，直接执行typesetPromise
            typesetLatex();
        } else {
            console.log('MathJax is not loaded, waiting for window load event');
            // MathJax未加载，等待窗口加载完成后执行typesetPromise
            window.addEventListener('load', typesetLatex);
        }

        function typesetLatex() {
            MathJax.typesetPromise().then(() => {
                console.log('MathJax typeset complete');
                const latexContainer = document.querySelector('#latexOutput');
                console.log('Rendered LaTeX innerHTML:', latexContainer.innerHTML);
                
                // 从MathJax容器中获取SVG元素
                const svg = document.querySelector('#latexOutput .mjx-chtml');
                console.log(svg);       
                if (svg) {
                    console.log('SVG element found');
                    const serializer = new XMLSerializer();
                    const svgString = serializer.serializeToString(svg);
                    console.log('SVG:', svgString);

                    // 将SVG插入VR元素中
                    const vrElement = document.querySelector('#latexVR');
                    vrElement.setAttribute('src', `data:image/svg+xml;base64,${btoa(svgString)}`);
                } else {
                    console.error('SVG element not found');
                }
            }).catch((err) => {
                console.error('MathJax typeset error:', err.message);
            });
        }
</script>

• 确认MathJax输出格式：先在控制台打印document.querySelector('#latexOutput').children，查看MathJax实际生成的元素类名。如果配置的是CommonHTML输出，.mjx-chtml是正确选择器；如果是SVG输出，目标类名应为.mjx-svg。
• 直接获取容器子节点：无需依赖类选择器，MathJax会将渲染后的内容放在#latexOutput的第一个子节点中，可直接通过latexContainer.firstElementChild获取：

  const renderedElement = latexContainer.firstElementChild;
  

• 用MathJax API直接生成SVG：跳过DOM渲染步骤，直接调用MathJax的tex2svgAPI生成SVG内容，更高效可靠：

  function typesetLatex() {
      const svgElement = MathJax.tex2svg(latex);
      const serializer = new XMLSerializer();
      const svgString = serializer.serializeToString(svgElement);
      
      const vrElement = document.querySelector('#latexVR');
      vrElement.setAttribute('src', `data:image/svg+xml;base64,${btoa(svgString)}`);
  }
  

• 确保渲染范围精准：调用typesetPromise时指定目标容器，避免全局渲染可能带来的延迟或异常：

  MathJax.typesetPromise([document.querySelector('#latexOutput')]).then(() => {
      // 后续逻辑
  });
  

• 验证容器存在性：在设置innerHTML后，立即打印document.querySelector('#latexOutput').innerHTML，确认LaTeX代码已正确插入容器，且容器未被其他代码篡改。

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