是否可以访问 SVG 的影子 dom

Question

Here is an svg with a use element:

 <svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/> <use href="#myCircle" x="10" fill="blue"/> </svg>

In the inspector I can see that the use element has a shadow root:

<use href="#myCircle" x="10" fill="blue">
  #shadow-root (closed)
  <circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"></circle>
</use>

Is it possible to somehow call methods such as getBBox() on the <circle> in the shadow dom?

If there is no straight-forward way, maybe there is some trick to allow me to access the closed shadow root?

Answer 1

In this case, it looks like no :

If you attach a shadow root to a custom element with mode: closed set, you won't be able to access the shadow DOM from the outside — myCustomElem.shadowRoot returns null . This is the case with built in elements that contain shadow DOMs, such as <video> [or svg].

Source: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#Basic_usage

Since the web inspector is listing the shadow root as closed, it isn't accessible via javascript.