Question

我正在寻找一种方法，如何在占位符元素中从外部文件加载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事件处理程序，该处理程序使用递归节点搜寻器将文档内容复制到目标占位符元素。不漂亮，但是有效。我希望有更好的方法。

Answer 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>

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

1 个答案: