Получить идентификатор щелкнутого пути svg с javascript

-1

У меня есть карта графств SVG в штате Массачусетс. Файл svg содержит пути, обозначающие каждое графство, и каждый путь имеет имя округа как id. Мне нужно захватить id графства, когда он щелкнут, чтобы его можно было установить в переменную.Получить идентификатор щелкнутого пути svg с javascript

Edit: SVG внешний файл (это карта с тонной пути координат, похоже, было бы запутанна, чтобы скопировать/вставить все это прямо в HTML, поэтому он загружается из внешний файл). Вот пример файла SVG:

<?xml version="1.0" encoding="iso-8859-1"?> 
<?xml-stylesheet type="text/css" href="co25_d00.css"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN" 
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 

<svg id="MACounties" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.0" width="100%" height="100%" preserveAspectRatio="xMidYMax" viewBox="12.711167 456.567074 29.566845 18.433033"> 
<title>Libre Map Project</title> 
<g transform="scale(1.0,-1.0) translate(0,-931.567181)"> 
<g id="Unknown_Area_Type_co25_d00_e00" style="fill:'currentColor';pointer-events:visible;stroke:rgb(1,0,0);stroke-width:0.01;stroke-linecap:round"> 
    <path id="Essex" d="M34.363079 474.99995L34.363179 474.99967 34.363179 474.99967 34.462128 474.99704 34.596972 474.95046...>

Edit 2: Это HTML-файл, когда изображение загружается.

<html> 
<head> 
    <title>Untitled</title> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <link rel="stylesheet" type="text/css" href="co25_d00.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 

       var container = $("#map"); 
       var svgUrl = "co25_d00.svg"; 
       var xmlDoc; 

       $.get(svgUrl) 
       .then(injectSvg); 

       function injectSvg(xmlDoc) { 
       var svg = $(xmlDoc).find("svg"); 
       container.append(svg); 
       }; 

       $(document).ready(function() { 
       $('path').onclick = function() { 
        alert($(this).attr('id')); 
       }; 
       }); 
      }); 
    </script> 
</head> 
<body> 
    <div id="map"></div> 
</body> 
</html>

источник

2016-10-11 Matt

Не могли бы вы предоставить нам SVG-код? Является ли это встроенным или ссылкой? –

@Matt Я не думаю, что вы можете прослушивать события на изображениях с внешней ссылкой, я предполагаю, что вы используете тег img для этого? –

Извините, я добавил фрагмент кода svg, с которым я работаю. – Matt

Ваше обязательное связывание должно быть внутри вашего обратного вызова. Как

$.get(svgUrl) 
     .done(function(svgdata) { 
      injectSvg(svgdata); 
      $('path').on('click', function() { 
       alert($(this).attr('id')); 
      }); 
    });

источник

2016-10-11 22:09:00 Ecropolis

Я пробовал это, и теперь карта вообще не загружается. – Matt

извините ... дайте это попробовать – Ecropolis

Это билет. Спасибо!! – Matt

Получить идентификатор щелкнутого пути svg с javascript

ответ

Смежные вопросы