我正在寻找一种方法如何从外部文件,占位符元素加载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事件处理程序,它使用递归节点爬虫将文档内容复制到目标占位符元素。不漂亮,但它的工作原理。我希望有更好的方法。
像下面这样的东西应该工作。我没有正确测试它。但它是其他一些代码的简化版本,所以它至少应该非常接近。
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>