为何无法通过HTML object标签访问嵌入的SVG内部元素？

功能失效是3个明确问题导致的：

• 核心问题：通过<object>标签引入的SVG是独立的文档上下文，和主HTML页面不在同一个DOM作用域，直接调用主页面的document.getElementById()只能查找HTML本身的节点，完全无法获取SVG内部的元素。
• 入口缺失：你的<object>标签没有设置唯一标识，根本无法定位到SVG加载对象的入口，更没法访问它的内部内容。
• 逻辑错误：你写的motor1.appendChild(svg)、ellipse.appendChild(motor1)属于完全颠倒的DOM操作，appendChild的作用是把传入的节点作为子节点插入到当前调用节点下，你这两行是在尝试把外层父节点塞到内层子节点里，就算成功获取元素也会打乱SVG结构导致渲染报错。

1. 先修改HTML里的object标签，添加id标识：

<object id="svgContainer" data="test.svg" type="image/svg+xml"></object>

2. 重写JS逻辑，先获取SVG的内部文档对象，再在SVG的文档作用域里查找元素，同时删除错误的节点插入逻辑：

function changeColor() {
  // 定位到加载SVG的object元素
  const svgObject = document.getElementById("svgContainer");
  // 兼容不同浏览器获取SVG内部文档的写法
  const svgDocument = svgObject.contentDocument || svgObject.getSVGDocument();
  
  // 处理SVG未加载完成/跨域无法访问的情况
  if (!svgDocument) {
    console.log("无法访问SVG文档，请检查加载状态或跨域配置");
    return;
  }

  // 注意：所有SVG内部元素都要从svgDocument下查找，不能用主页面的document
  const targetEllipse = svgDocument.getElementById("ellipse205");
  if (targetEllipse) {
    targetEllipse.setAttribute("style","fill:green;stroke:green;stroke-width:2");
  }
}

额外注意：必须保证test.svg和当前HTML页面符合同源策略（同协议、同域名、同端口），否则浏览器会拦截跨域文档访问，无论怎么写都拿不到SVG内部元素。

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