Question

我制作了一个网页，用于加载带有对象标签

的svg

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

并希望动态显示一些内容。当我在HTML中包含svg direct时，它可以正常工作

<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 object，这似乎是可能的，但有一些限制：

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

Answer 2

尝试一些香草而不是

function hide(id){
    document.getElementById(id).style.display = "none";
}
function show(id){
    if(document.getElementById(id).style.display === "none")
         document.getElementById(id).style.display = "";
    else
        document.getElementById(id).style.display = "block"
}

使用jQuery从object标签中选择ChildElement

2 个答案: