使用javascript获取单击的svg路径的id

我有一张马萨诸塞州各县的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...>

自由地图项目
事件绑定需要位于回调内部。像

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

你能和我们分享SVG代码吗？它是嵌入的还是被引用的？@Matt我认为你不能在外部引用的图像上设置事件侦听器，我假设你使用的是img标记来实现它？对不起，我添加了一段我正在使用的svg代码。@Matt我们回到了，出了什么问题？onclick没有被调用吗？如果调用它，警报是否会显示您不期望的内容？问题可能是您过早地在
$（文档）.ready
函数中设置了
click
处理程序。加载SVG并将其插入DOM（即在
injectSvg
中）后，尝试设置
单击
处理程序。我已经尝试过了，但现在地图根本无法加载。抱歉。。。试一试这就是问题所在。非常感谢。
  $.get(svgUrl)
      .done(function( svgdata ) {
          injectSvg(svgdata);
          $('path').on('click', function() {
              alert($(this).attr('id'));
          });
  });