在javascript中为嵌入式SVG的元素添加click事件

Question

我从维基百科获得了这个SVG图像,并使用以下代码将其嵌入到网站中:

<embed src="circle1.svg" type="image/svg+xml"/>

如果运行此命令,则可以检查元素并查看源代码.图像中的所有国家/地区都是独立元素.如果我点击某个国家/地区,我想提醒该国家/地区的ID,因为每个国家/地区在SVG中都有两个字母的ID.有谁知道这样做的方法？如果我将它放入元素中会更容易吗？

Answer 1

这是一个应该与您尝试做的非常相似的示例.它使用<object>而不是<embed>,但这只是一个小细节.请参阅另一个示例,了解如何从父文档中获取嵌入文档的DOM,它在两者之间略有不同.

另请注意,维基百科所拥有的svg地图非常大,因此您需要在实际网站上实际使用之前优化svgs,例如SVG Cleaner或SVG Scour.

Answer 2

如果您的SVG包含在DOM中,则可以使用与基本HTML相同的方式将事件侦听器附加到单独的元素.使用jQuery的一个例子是:http://jsfiddle.net/EzfwV/

更新:大多数现代浏览器都支持内联svg,因此要将源加载到DOM中,您所要做的就是从资源加载它(使用类似jQuery的load()).

编辑:更具体的例子http://jsfiddle.net/EzfwV/3/

Answer 3

2016 年 7 月更新

embed在您嵌入来自同一域的某些内容的情况下，现在可以响应来自元素的事件。我已经创建了一个快速演示作为JSFiddle。最重要的部分是可以通过. 从那里，可以访问 SVG 元素并可以安装单击事件处理程序。embeddingElement.contentDocument

实现说明：在演示中，我为所有path元素添加了事件处理程序。出于性能原因，您可能希望向 SVG 添加单个事件处理程序，然后在处理程序中使用事件目标。编辑：就像在这个更新的 Fiddle 中一样。

旧答案

一个快速的谷歌搜索把我带到了这里。我认为这就是您问题的答案，对吗？

在这里总结一下：无法捕获embed元素上的事件，不幸的是，唯一的解决方案是修改 SVG 文件。

这是一个关于如何将 JavaScript 嵌入到 SVG 文件 ( JSFiddle )的小示例。它基于IBM developerWorks 的一个示例。

<svg>
  <script type="text/javascript">
    <![CDATA[
    var redVal = 0;
    var greenVal = 0;
    var blueVal = 0;

    function changeCol(evt) {
       redVal = Math.round(Math.random() * 255);
       greenVal = Math.round(Math.random() * 255);
       blueVal = Math.round(Math.random() * 255);
       evt.target.setAttribute("fill",
             "rgb(" + redVal + "," + greenVal + "," + blueVal + ")");

    }
    // ]]>
  </script>
  <circle cx="200" cy="200" r="100" fill="blue"
          onclick="changeCol(evt)" />
</svg>

Answer 4

好的，使用您的评论，我找到了问题的答案。我在 svg 本身中添加了这段代码。

<script type="text/javascript"> <![CDATA[
    function addClickEvents() {
        var countries = document.getElementById('svg1926').childNodes;
        var i;
        for (i=0;i<countries.length;i++){
            countries[i].addEventListener('click', showCountry);
        }
    }

    function showCountry(e) {
        var node = e.target;
        if (node.id != 'ocean') {
            node = getCorrectNode(node);
        }
        alert(node.id);
    }

    function getCorrectNode(node) {
        if (node.id.length == 2 || node.id == 'lakes') {
            return node;
        }
        return getCorrectNode(node.parentNode);
    }
]]> </script>

addClickEvents 函数在 svg 加载时触发。但是我还有另一个问题。我必须使用

<embed src="circle1.svg" type="image/svg+xml" />

我必须将其放入 HTML 文档中的 div 中，而不是提醒 id。如何从 svg 中获取此 ID？