如何在MathJax中避免使用shadow-root？

Question

我想通过javascript访问由MathJax创建的SVG代码。显然，MathJax将SVG <path>置于shadow-root下，javascript无法直接访问该<svg>。以下是Chrome提供的元素图片

如果我通过任何javascript方法获得<path>元素，则不会包含{{1}}个孩子。

Answer 1

你无法避免shadow-root。它不是由MathJax渲染器放在那里的。这是因为use标签。 来自MDN：

  

<use>元素从SVG文档中获取节点，并将其复制到其他位置。

因此MathJax创建了svg pathes并为它们提供了ID并重用它们。假设字母a呈现为svg，MathJax将其存储在带有id的svg中，并在需要呈现字母a时使用。

以下来自MDN的示例说得更好。

<svg width="80" height="80" xmlns="http://www.w3.org/2000/svg">
  <style>
    .classA {
      fill: red;
    }
  </style> 
  <defs>
    <g id="Port">
      <circle style="fill: inherit;" r="10"/>
    </g>
  </defs>
 
  <text y="15">black</text>
  <use x="50" y="10" href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" href="#Port" style="fill: blue;"/>
</svg>