javascript - 使用 jQuery 从对象标签中选择 ChildElement

Question

我制作了一个网页，使用对象标签加载 svg

<object id="svgContainer" type="image/svg+xml" data="image.svg">Your browser does not support SVG</object>

并且想要动态显示一些内容。当我将 svg 直接包含在 HTML 中时，它工作正常

<svg id="svgVontainer">
  <circle cx="100" cy="100" r="2" id="edit" />
</svg>

JavaScript:

$(function() {
  $("#edit").hide();
});

但是当我对 object 尝试相同的代码时，它不起作用。

有人知道这个问题以及如何解决它吗？

编辑:这里有一个 jsFiddle，这样你就可以明白我的意思 http://jsfiddle.net/Ue7m7/ .

Answer 1

如果您只想隐藏/显示 SVG object 标签，you can do it as usual with jQuery .

但是如果您想处理“远程”SVG 对象的内容，这似乎是可能的，但有一些限制:

• 您需要将 SVG 文件放在与托管页面相同的域中(出于与 iframe 标记相同的安全原因)。
• 要使用 JS 操作 SVG object 标签，您需要额外的 JS 代码，如下所示 here 。我认为使用 jQuery 你可以尝试 $("#rect1").get(0).getSVGDocument() 或类似的东西(我还没有测试过那个片段)。 Check that link to learn more .
• 您可以添加 SVG fallback (如果 SVG 文件无法渲染)。