Question

我搜索过的所有问题似乎都没有帮助我。

我正在嵌入一个SVG文档：

<embed onload="fixup()" id="zgraphic" src="images/test.svg" width="500" type="image/svg+xml" />

然后我试图在SVG中寻找元素并向它们添加事件处理程序。我已经了解到jQuery无法找到SVG元素。我头脑中有这个：

<script type="text/javascript">

 function blah(event) {
     alert("Got event: " + event)
 }

    var svg;
    var slot1;

function fixup() {
   svg = jQuery("#zgraphic")[0].getSVGDocument();
   slot1 = svg.getElementById("slot1");
   slot1.onclick = blah;
   alert("Set onclick for " + slot1);
  }
 </script>

使用firebug我可以看到svg和slot1变量已经设置，并且slot1的onclick属性也被设置了。然而事件永远不会到来。

附带问题：获取根SVGDocument对象有比获取方式更好的方法吗？我通过反复试验到达那里，但它看起来不稳定，我无法在网上找到类似的东西。如果jQuery能够进入SVG文档会很好，但如果必须的话，我可以没有它。

Answer 1

在test.svg中创建函数，使用fixup函数调用文件中的正确代码

所以在你的test.svg文件中你会有类似的东西

function blah(e) {
e.stopPropagation();
window.parent.blah(e);

}

Answer 2

你可能想看看dojo的gfx： http://docs.dojocampus.org/dojox/gfx

这是一个用于访问浏览器矢量功能的API。

Answer 3

我从来没有让这个工作，但我发现我想要做的事情在支持它的浏览器上的HTML 5中工作得很好。 svg元素与其他任何元素集成在文档DOM中，因此jQuery和getElementById的工作方式与其他元素相同。

从嵌入式SVG文档中获取事件

3 个答案: