外部のJSを使用してインラインのSVG要素にバインドイベントをクリック

私はインタラクティブマップの作成に取り組んでいます。 SVG imgでどの要素がクリックされたかに基づいて実行する必要があるのは、その特定のマークされた場所に関する情報が表示されたツールチップウィンドウです。外部のJSを使用してインラインのSVG要素にバインドイベントをクリック

今のところ、私はクリックイベントに応答するマーカーを取得できません。以下は私が作業しているコードです。クリックイベントが実際に応答したら、私は離れて走ります。私はちょうどなぜこのクリックイベントが応答していない（そして結果としてかなり不満をこうむっている）かについて固執しています。

クリックレスポンスが発生しない理由を理解するために、この投稿を読んでいます：Include SVG files with HTML, and still be able to apply styles to them?とこのシナリオには解決できない解決策がいくつかあります。 SVGが正しくインライン化されているため、CSSによって設定されたホバーイベントが発生しています。これは発生していないクリックイベントです。どんな助けでも大歓迎です！

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>

出典

2016-11-09 TomJ

こんにちはトム、通常、あなたはそれが動作するはず確かに知っているので、手動での複雑さの「制御」層を追加する必要があります。私が意味することは、SVG領域全体にレイヤーマスクを追加することです。次に、数式を使用して、ポインタが「上」のマスクと下の「svg」の関係にあるかどうかを判断します。数学が真を返す場合は、目的のイベントを発生させます。私が言ったように、方法はより肥大し複雑ですが、最終結果は保証されています。あなたがプレイするサンドボックスを私たちに提供した場合、私はあなたが私の意味をより詳細に示すことができます。 –

アレクサンダーありがとう、私はあなたが何を指しているのか理解していると信じています。 HTML 4.01でイメージマップを使ったのと似たようなものですが、正しいのでしょうか？私はこれが正しい方向への良いプッシュだと思う。 5分ほどで物事が動かない場合は、私はjsfiddleを入れます。再度、感謝します！ – TomJ

はい、私はそれが当時使われていたものだと信じています。私たちはタスクを解決するためのさまざまな技術について話しているので、あなたは '

それで解決が決まりました。時間切れを組み込むだけで、クリックに応じるようにすることができました。そして、私は行くレースへ！

の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")); }); 
    }); 
}

出典

2016-11-09 02:06:38 TomJ

正直言って、私が最初に気がついたのは、イベントが見つかるまでスキャンするsetInterval（）にイベントを入れることでした。その方法は文字通り私の「パンとバター」なので、タイミングに関するあらゆる問題を解決できます。それを理解したことのために乾杯。 –

タイムアウトが必要な理由がわかりません。ちょうどその時点、つまりsetTimeoutを呼び出す場所で直接initExchangePointsを呼び出してください。 –

外部のJSを使用してインラインのSVG要素にバインドイベントをクリック

答えて

関連する問題