文章/答案/技术大牛

发布

社区首页 >问答首页 >将click事件绑定到具有外部JS的内联SVG元素

问将click事件绑定到具有外部JS的内联SVG元素
EN

Stack Overflow用户

提问于 2016-11-09 09:13:19

回答 1查看 954关注 0票数 2

我正致力于创建一个交互式地图，并在一个小路障。我需要发生的是基于什么元素被点击在SVG img中，一个工具提示窗口应该出现与该特定标记点的信息。

但是现在，我甚至不能让任何一个标记响应单击事件。下面是我正在使用的代码。一旦单击事件实际响应，我将关闭并运行。我只是被卡住了，为什么这个点击事件没有响应(并因此变得非常沮丧)。

我已经通读了这篇文章，希望了解为什么点击响应没有发生：Include SVG files with HTML, and still be able to apply styles to them?以及其他几个没有适用于这种情况的解决方案。SVG被正确地内联，由CSS设置的hover事件正在发生，只是没有发生单击事件。任何帮助都将不胜感激！

HTML：

<!DOCTYPE HTML>
 <html>
    <head>
        <title>TITLE</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
        <link rel="stylesheet" href="{$url}/css/style.css">
        <link rel="shortcut icon" href="{$url}/favicon.ico" type="image/x-icon">
        <link rel="icon" href="{$url}/favicon.ico" type="image/x-icon">
    </head>
    <body>
        <img src="{$url}/images/3d-map.svg" id="3d-map" class="svg">

         <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
         <script src="{$url}/js/scripts.js"></script>
    </body>
</html>

jQuery：

 $(document).ready(function(){
     /*
      * Replace all SVG images with inline SVG
      */

     $('img.svg').each(function(){
     var $img = $(this);
     var imgID = $img.attr('id');
     var imgClass = $img.attr('class');
     var imgURL = $img.attr('src');

     $.get(imgURL, function(data) {
        // Get the SVG tag, ignore the rest
        var $svg = $(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);

     }, 'xml');
 });
});

$(window).load(function(){
    $(".exchange-marker").bind('click', function(e){
        console.log('clicked');
        console.log($(this).attr('id'));
    });
 });

CSS：

.exchange-marker:hover{
    stroke: #fabf23;
    stroke-width: 3;
    transition: all 0.3s;
}

SVG (为简洁起见进行了截断)：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1400" height="1200" viewBox="0 0 1400 1200">
    <g id="markers" fill="#2876BC">
        <ellipse id="exchange-1" class="exchange-marker" cx="963.8" cy="853.7" rx="14.9" ry="4.8"/>
        <ellipse id="exchange-2" class="exchange-marker" cx="929.3" cy="833.1" rx="14.9" ry="4.8"/>
    </g>
</svg>

jquery

html

css

svg

回答 1

Stack Overflow用户

发布于 2016-11-09 10:06:39

因此，决议归根结底是在这方面制定时间。通过简单地加入超时，我们能够让它对点击做出应有的响应。我要去看比赛了！

jQuery：

$(document).ready(function(){
    initSVGMap();
});

 function initSVGMap(){ 
    var $img = $('img.svg');
    var imgID = $img.attr('id');
    var imgClass = $img.attr('class');
    var imgURL = $img.attr('src');

  $.get(imgURL, function(data) {
    // Get the SVG tag, ignore the rest
    var $svg = $(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);

  }, 'xml');

  setTimeout('initExchangePoints()', 1500); // THIS IS THE FIX
}

function initExchangePoints(){
    $("ellipse").each(function(){
        $(this).bind("click", function(){ console.log("Clicked " + $(this).attr("id")); });
    });
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40498978

复制

相似问题

问将click事件绑定到具有外部JS的内联SVG元素
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将click事件绑定到具有外部JS的内联SVG元素EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将click事件绑定到具有外部JS的内联SVG元素
EN