通过 id 将 onclick 添加到 svg 路径答案

【问题标题】：Add onclick to svg path by id通过 id 将 onclick 添加到 svg 路径
【发布时间】：2014-10-20 07:13:14
【问题描述】：

使用this Stackoverflow 问题和第一个答案，我能够在准备好文档时将 SVG 图像转换为内联 svg。我还可以从 CSS 中引用它的路径元素来添加悬停笔触。

我要完成的下一件事是将 onclick 添加到每个路径，而不必将其添加到 svg 文件本身。我假设由于 CSS 可以识别每个路径的类，我也应该能够在 javascript 中识别每个路径的 ID，但我无法弄清楚如何。这是我的代码：

 <body>
        <div id="mapSideBar" class="left">
        </div>
        <div id="mapMain" class="left">
            <img id = "mapImg" src="canada2.svg" class="logo" />

        </div>

    </body>

我有上面链接中提到的将其转换为内联 SVG 的函数，并且我的路径有 id - path1、path2、path3 和 path4。我尝试将以下内容添加到jQuery(document).ready() 函数中：

var $paths = jQuery(document).find('path');
$paths.each(function() {
    (this).click(onImgClick((this).id));
});

只是想看看我是否能掌握每条路径，但我不能。是否有我遗漏的东西，或者甚至有办法将 onclick 事件处理程序分配给每个路径？

谢谢你，里士

【问题讨论】：

你能多展示一点 HTML 吗？
有什么理由不只是将 svg 标签放入 html 文档中？ (w3schools.com/html/html5_svg.asp)
@SlipperyPete，显示了相关的 HTML，因为 jQuery 函数负责将 SVG 图像转换为内联。本质上，我在编辑后的帖子中显示了页面上的一个 div。
@thebjorn，我不拥有/创建图像。它是从数据源中检索的，我只指定路径的 ID。我将不得不更改代码以考虑稍微修改但功能相同的图像

标签： javascript jquery html css svg

【解决方案1】：

这是一个可行的解决方案：JSFiddle

HTML：

<img class="svg" src="http://upload.wikimedia.org/wikipedia/en/e/e5/My_Little_Pony_Friendship_is_Magic_logo.svg"/>

CSS：

svg path:hover {
    fill: red !important;
}

JavaScript：

/*
 * Replace all SVG images with inline SVG
 */
jQuery('img.svg').each(function(){
    var $img = jQuery(this);
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

    jQuery.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = jQuery(data).find('svg');

        // Add replaced image's ID to the new SVG
        if(typeof imgID !== 'undefined') {
            $svg = $svg.attr('id', imgID);
        }
        // Add replaced image's classes to the new SVG
        if(typeof imgClass !== 'undefined') {
            $svg = $svg.attr('class', imgClass+' replaced-svg');
        }

        // Remove any invalid XML tags as per http://validator.w3.org
        $svg = $svg.removeAttr('xmlns:a');

        // Replace image with new SVG
        $img.replaceWith($svg);

        // Add an handler
        jQuery('path').each(function() {
            jQuery(this).click(function() {alert(jQuery(this).attr('id'));});                       
        });
    });
});

【讨论】：

谢谢！现在开始学习 $(..) 和 jQuery(..) 之间的区别
完全没有区别，$(..)是jQuery(..)的别名。
很奇怪。 $('path') 没有返回路径数组，但您的解决方案中的 jQuery('path') 会返回。这让我质疑两者之间的区别。
要么你有另一个使用 $(..) 的 JavaScript 框架，要么你在 jQuery.get(...) 之后调用了 $('path') 而不是在回调函数中，所以因为 jQuery.get (...) 是异步的，它在任何“路径”实际存在之前被调用。
这里是相同的JSFiddle，使用 $(..) 而不是 jQuery(..)。

【解决方案2】：

jQuery(document).ready() 不足以确保您的内联 svg 已正确加载。

要验证这是否是实际问题，请为您的函数添加超时，看看它是否工作得更好。

最终，您可能需要做的是向执行内联 svg 转换的函数添加回调。

【讨论】：