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

我正在尝试将外部 SVG 文档加载到一个简单的网页中，以便我可以将其用作基本的氯罗佩斯地图。然而，使用<object data=""></object>HTML 中的结果是 SVG 作为子文档加载。

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

HTML：

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

这是使用控制台的 DOM 截图（注意 SVG 的内容是inside a #document子文档！）：

我相信你正在寻找的是getSVGDocument http://www.w3.org/TR/SVG11/struct.html#__svg__GetSVGDocument__getSVGDocument or contentDocument:

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

or

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

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

Update

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

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

同样，不确定兼容性如何，但它可以在 Safari 中使用。根据W3C DOM 常见问题解答 http://www.w3.org/DOM/faq.html#moveNode，这是一个 DOM Level 3 方法。 2级有importNode这显然允许复制而不是移动。正如同一常见问题解答所建议的，您始终可以遍历子文档并使用以下命令在主文档中重新创建层次结构createNode和朋友。