javascript - 如果我使用<object> tag, is it possible to use normal DOM methods in JS to access the children elements? <div id="body"><p>If I am embedding an SVG using an <code><object></code> tag, is it possible to use normal DOM methods to access the children element

问题描述

If I am embedding an SVG using an <object> tag, is it possible to use normal DOM methods to access the children elements?

Example

First a simple SVG:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg"
   viewBox="0,0 100, 100">
  <defs>
    <style>
      #cls-1 {
        fill: none;
        stroke: #000;
        stroke-width: 4;
      }
    </style>
  </defs>
  <title>Circles</title>
  <g id="cls-1">
    <circle cx="30" cy="30" r="10" />
    <circle cx="60" cy="60" r="10" />
  </g>
</svg>

Then an HTML file that embeds the SVG using and tries to access the group defined in the SVG within a script:

<html>

<body>
    <object
      type="image/svg+xml"
      height="200px"
      data="mysvg.svg"
    ></object>
    <button onclick="myAnimate()" />

    <script>
      const myAnimate = () => {
        const group = document.getElementById("cls-1");
      };
    </script>
</body>
</html>

Wy doesn't this work?

I see in the devtools that the first child of this is #document. So it seems to have it's own DOM, I think I read this, but still have not wrapped my head around how it works.

Is there a way to access the element with id "cls-1" from JS?

EDIT: one way to make this work is to add the script within the svg itself; the DOM methods work normally for the DOM in the SVG

javascript - 如果我使用

问题描述

解决方案

推荐阅读