在svg文档中嵌入svg文件,通过JavaScript访问它的对象

问题描述 投票:0回答:1

我正在寻找一种方法如何从外部文件,占位符元素加载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>

这里有一些伪代码:

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");
});

目前我在内存中创建一个新的<object>元素,加载svg文件,挂钩一个onload事件处理程序,它使用递归节点爬虫将文档内容复制到目标占位符元素。不漂亮,但它的工作原理。我希望有更好的方法。

javascript svg
1个回答
1
投票

像下面这样的东西应该工作。我没有正确测试它。但它是其他一些代码的简化版本,所以它至少应该非常接近。

function loadSVGFile(svgURL, placeholderElem, callbackFn) {
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
     if (xhr.readyState == 4 && xhr.status == 200) {
       var svg = xhr.responseXML.getElementsByTagName('svg')[0];
       placeholderElem.parentElement.replaceChild(svg, placeholderElem); // Replace the placeholder node
       //targetNode.appendChild(svg); // Insert into the placeholder node 
       if (callbackFn) {
         callbackFn(svg);
       }
     }
   }
   xhr.open('GET', svgURL, true);
   xhr.send(null);
}            

var placeholder = document.getElementById("placeholder");

loadSVGFile("drawing.svg", placeholder, function(svg) {
  // Callback called when the file has loaded
  var obj = svg.ownerDocument.getElementById("obj1");
  obj.setAttribute("fill", "black");
});
<body>
<svg width="700" height="500">
  <rect x="10" y="10" height="480" width="680" fill="red"/>
  <g id="placeholder"></g>
</svg>
</body>
© www.soinside.com 2019 - 2024. All rights reserved.