在svg文档中嵌入svg文件，通过JavaScript访问其对象_Javascript_Svg

在svg文档中嵌入svg文件，通过JavaScript访问其对象

javascript svg

在svg文档中嵌入svg文件，通过JavaScript访问其对象,javascript,svg,Javascript,Svg,我正在寻找一种方法，如何在占位符元素中从外部文件加载svg内容，并在加载时访问其对象以进行操作/修改大概是这样的： Host file: <body> <svg width="700" height="500"> <rect x="10" y="10" height="480" width="680" fill="red"/> <g id="placeholder"></g> </svg> </body&g

我正在寻找一种方法，如何在占位符元素中从外部文件加载svg内容，并在加载时访问其对象以进行操作/修改

大概是这样的：

Host file:

<body>
<svg width="700" height="500">
  <rect x="10" y="10" height="480" width="680" fill="red"/>
  <g id="placeholder"></g>
</svg>
</body>

drawing.svg file:

<svg>
  <circle id="obj1" cx="300" y="250" r="100" fill="blue"/>
</svg>

目前，我正在内存中创建一个新元素，加载svg文件，连接一个onload事件处理程序，该处理程序使用递归节点爬虫将文档内容复制到目标占位符元素。虽然不漂亮，但很管用。我希望有更好的办法。

像下面这样的办法应该行得通。我没有对它进行适当的测试。但它是其他一些代码的精简版本，所以至少应该非常接近

函数loadSVGFilesvgURL、占位符元素、callbackFn{ var xhr=新的XMLHttpRequest； xhr.onreadystatechange=函数{ 如果xhr.readyState==4&&xhr.status==200{ var svg=xhr.responseXML.getElementsByTagName'svg'[0]； placeholder Elem.parentElement.replaceChildsvg，placeholder Elem；//替换占位符节点 //targetNode.appendChildsvg；//插入占位符节点如果调用{ CallbackFunsvg； } } } xhr.open'GET'，svgURL，true； xhr.sendnull； } var占位符=document.getElementByIdplaceholder； loadSVGFiledrawing.svg、占位符、函数svg{ //加载文件后调用回调 var obj=svg.ownerDocument.getElementByIdobj1； obj.setAttributefill，黑色； };

谢谢，我测试了代码，修复了一些bug。最重要的修复是svg变量是一个节点对象，它没有文档属性。我们必须使用ownerDocument属性。

var placeholder = document.getElementById("placeholder");
loadSVGFile("drawing.svg", placeholder, function(svg) {
  // Callback called when the file has loaded
  var obj = svg.document.getElementById("obj1");
  obj.setAttribute("fill", "black");
});