Javascript 如何使SVG图像元素可单击以显示角度的弹出窗口？

这是我的代码=。我试了很多。本节显示将在容器节中加载的svg图像。 admin.component.html（包含SVG图像）

popup.component.html（弹出模式）

情态标题
&时代；
你好
接近
保存更改

app.component.ts（这里我通过模式id调用函数。）

ngOnInit（）{
$（“g”）。单击（函数（）{
$（“弹出”）.modal（“显示”）；
});
}

我的假设是，由于您的

admin.component.html

中实际上没有svg模板，jquery无法找到

svg

中使用的“g”标记

建议

• 在包含

  svg

  （推荐的）的

  img

  上添加click事件处理程序

• 如果您确实需要在

  g

  标记上添加事件处理程序。然后添加svg模板来代替包含

  svg

  的

  img

  标记。只需在任何文本编辑器中打开您的

  svg

  ，然后复制粘贴代码。它看起来像什么 像这样

您是否尝试将角度单击处理程序添加到

元素中？我认为图像是SVG这一事实在这里并不重要。它实际上不起作用。控制台中未生成任何事件/错误。

ngOnInit(){
    $('.center2').click(function(){                                 
        $("#popup").modal("show");
    });
}

<div class = "container" style="text-align: center; position: relative; left: 0; top: 0;">
    <img class="center1" type="image/svg+xml" src="assets/1.jpg" width="500px"/>  
    <svg class="center2" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <g fill="white" stroke="green" stroke-width="5">
          <circle cx="40" cy="40" r="25" />
          <circle cx="60" cy="60" r="25" />
        </g>
    </svg>
<div>
<router-outlet></router-outlet>