Question

我得到this SVG image from Wikipedia并使用此代码将其嵌入到网站中：

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

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

Answer 1

这是example，应该与您尝试的非常相似。它使用＆lt; object＆gt;而不是＆lt; embed＆gt;，但这只是一个小细节。有关如何从父文档中获取嵌入文档的DOM，请参阅此另一个example，它在两者之间略有不同。

另请注意，维基百科所拥有的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 创建了一个快速演示。最重要的部分是可以通过embeddingElement.contentDocument访问嵌入的文档。从那里，可以访问SVG元素并可以安装click事件处理程序。

实施说明：在演示中，我向所有path元素添加事件处理程序。出于性能原因，您可能希望向SVG添加单个事件处理程序，然后在处理程序中使用事件目标。修改：例如 updated Fiddle 。

旧答案

Google快速搜索为我带来了here。我认为这是你问题的答案，对吧？

总结一下：不可能在embed元素上捕获事件，遗憾的是唯一的解决方案是修改SVG文件。

以下是如何将JavaScript嵌入SVG文件（ JSFiddle ）的小示例。它基于IBM developerWorks的example。

<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>

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

将这个svg（带代码）嵌入到HTML文档中

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

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

Answer 5

一个简单的方法是

使用javascript
动态添加样式
向路径添加事件
附加到现有SVG。

脚本

 <svg id="mySvg"></svg>

var XMAX = 500;
var YMAX = 500;
var _xx=10;
var _reg=100;
var _l=10;
// Create PATH element
for(var x=1;x<20;x++)
{
var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");
pathEl.setAttribute('d','M'+_l+' 100 Q 100  300 '+_l+' 500' );
pathEl.style.stroke = 'rgb('+(_reg)+',0,0)';
pathEl.style.strokeWidth = '5';
pathEl.style.fill = 'none';
    $(pathEl).mousemove(function(evt){$(this).css({"strokeWidth":"3","stroke":"#ff7200"}).hide(100).show(500).css({"stroke":"#51c000"})});

$('#mySvg').append(pathEl);
_l+=50;
}

Live Demo in JSFiddle

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

5 个答案:

2016年7月更新

旧答案