使用JavaScript获取点击的SVG路径的ID

Question

使用JavaScript获取点击的SVG路径的ID

3

我有一张马萨诸塞州各县的SVG地图。svg文件包含描绘每个县边界的路径，每个路径都有该县的名称作为其id。我需要在单击时获取该县的id ，以便将其设置为变量。 编辑：该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...>

编辑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>

- Matt

你能分享一下 SVG 代码吗？是内嵌还是引用的？ - undefined

@Matt 我觉得你不能在外部引用的图片上添加事件监听器，我猜你是使用img标签来实现的吧？ - undefined

抱歉，我添加了一小段我正在使用的SVG代码。 - undefined

1

问题可能是您在$(document).ready函数中设置了click处理程序太早了。尝试在SVG加载并插入DOM后设置click处理程序（即在injectSvg中）。 - undefined

我刚刚编辑了下面的答案。在jQuery中，你可以使用'click'函数来绑定点击事件，但它已经被弃用了。我已经更新了我的代码，使用了on()函数来绑定事件，这个函数通常用于绑定事件...第一个参数是事件，第二个参数是要绑定的代码。 - undefined

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ecropolis · Accepted Answer

您的事件绑定需要在回调函数中。像这样：

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