我得到this SVG image from Wikipedia 并使用此代码将其嵌入到网站中：
<embed src="circle1.svg" type="image/svg+xml"/>
如果你运行它，你可以检查元素并查看源代码。图像中的所有国家都是独立的元素。如果我点击一个国家，我想提醒那个国家的 id，因为每个国家在 SVG 中都有一个由两个字母组成的 id。有谁知道这样做的方法？如果我把它放在一个元素中会更容易吗？
【问题讨论】：
标签： javascript html canvas svg
这是一个example，它应该与您尝试执行的操作非常相似。它使用
还请注意，维基百科的 svg 地图非常大，因此您需要在实际使用网站之前优化 svg，例如 SVG Cleaner 或 SVG Scour。
【讨论】：
如果您的 SVG 包含在 DOM 中，您可以使用与基本 HTML 相同的方式将事件侦听器附加到单独的元素。使用 jQuery 的一个例子是：http://jsfiddle.net/EzfwV/
更新：大多数现代浏览器都支持内联 svg，因此要将源代码加载到 DOM 中，您所要做的就是从资源中加载它（使用类似 jQuery 的 load() 之类的东西）。
编辑：更具体的例子http://jsfiddle.net/EzfwV/3/
【讨论】：
好的，使用您的 cmets 我找到了问题的答案。我在 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 加载时触发。 但我还有另一个问题。我必须使用
将此 svg（带有代码）嵌入到 HTML 文档中<embed src="circle1.svg" type="image/svg+xml" />
我必须将它放入 HTML 文档中的 div 中，而不是提醒 id。 如何从 svg 中获取此 id？
【讨论】：
现在可以响应来自embed 元素的事件，条件是您嵌入了来自同一域的内容。我以 JSFiddle 的形式创建了一个快速演示。最重要的是可以通过embeddingElement.@987654322@访问嵌入的文档。从那里，可以访问 SVG 元素并安装点击事件处理程序。
实现说明：在演示中，我将事件处理程序添加到所有path 元素。出于性能原因，您可能希望将单个事件处理程序添加到 SVG，然后在处理程序中使用事件目标。编辑：就像在这个 updated Fiddle.
快速的谷歌搜索给我带来了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>
【讨论】：
embed 元素上的事件，更不用说 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;
}
【讨论】：