jquery 将悬停事件处理程序附加到嵌入式 svg 文件中的路径答案

【问题标题】：jquery attach a hover event handler to a path within an embedded svg filejquery 将悬停事件处理程序附加到嵌入式 svg 文件中的路径
【发布时间】：2011-11-10 14:00:12
【问题描述】：

我正在尝试使用 jquery 将悬停事件处理程序附加到嵌入式 svg 中的路径。

html 中的嵌入代码如下所示：

<embed id="theSVG" src="thesvg.svg" type="image/svg+xml" width="2000" height="1280" />

如果我不嵌入 svg，我可以让它工作，而是将它放入 html 内联中，然后使用以下 javascript，链接到 html 文件：

$('path').hover(
function () {
//do something
};
}, 
function () {
//do something else
};
}
);

但我不知道如何通过 jquery 引用嵌入式 svg 中的路径。

谢谢，

脸书

【问题讨论】：

标签： jquery event-handling svg embed

【解决方案1】：

您很可能需要 jQuery 的 svg 插件来访问 svg 嵌入式代码。 Here's the example 使用 jQuery SVG 将事件附加到 svg 中的路径。

一般来说是这样的：

var svg = $('#svg_container').svg('get');
$("#path_id", svg.root()).bind('click', function() {
    alert('path clicked');
})

【讨论】：

感谢 WTK。我可以看到您所说的是我需要的，我现在无法理解如何实现它。我对 javascript 的理解可能有点超前。