将外部SVG加载到DOM中，当前文档不是子文档

Question

我正在尝试将外部SVG文档加载到一个简单的网页中，以便我可以将其用作基本的chloropeth地图。但是，在HTML中使用<object data=""></object>会导致SVG加载为子文档。

基本上我无法使用jquery通过ID查询SVG路径（例如：$('#NY').css("fill", "red")没有做任何事情）。显然我可以将实际的SVG内容剪切并粘贴到HTML中，但我很好奇是否有办法使用<object>或类似方法将SVG路径内容加载到HTML文档中。

HTML：

<object data="/static/metric/img/map_US.svg" type="image/svg+xml">
</object>

以下是使用控制台的DOM镜头（注意SVG的内容是里面一个#document子文档！）：

Answer 1

我相信您要找的是getSVGDocument或contentDocument：

document.getElementById('thesvg').getSVGDocument().getElementById('theelement')

或

document.getElementById('thesvg').contentDocument.getElementById('theelement')

你可能想要测试两者，我不太确定目前与各种浏览器的兼容性。

<强>更新

您可以使用adoptNode将节点从SVG子文档移动到主节点。在主文档中使用空<svg>元素（称为target）：

o = document.getElementById('thesvg').contentDocument.getElementById('theelement');
document.adoptNode(o);
document.getElementById('target').appendChild(o);

同样，不确定兼容性是什么，但它适用于Safari。根据{{​​3}}，这是一个DOM Level 3方法。等级2有importNode，显然允许复制而不是移动。并且如同相同的FAQ所示，您始终可以使用createNode和朋友遍历子文档并在主文档中重新创建层次结构。