Angular中绑定SVG path元素的click事件不触发该如何解决？

1. 事件名拼写错误 #

第一个path元素的点击事件绑定存在笔误，你写的是(click)="oClick(5)"，缺少了字母n，和组件中定义的onClick方法名不匹配，会导致点击第一个path时找不到对应方法，控制台也会抛出方法未定义的报错。

2. 点击区域判定问题 #

所有path都设置了fill="none"，默认情况下SVG的path只有描边（stroke）的线条区域会响应点击事件，如果你点击的是path围起来的内部空白区域，不会触发点击。
如果需要让整个path闭合区域都响应点击，两种可选解决方案：

• 方案1：将fill设置为透明色，保留透明填充的同时支持响应点击：fill="transparent"
• 方案2：添加pointer-events属性，指定就算fill为none也响应整个闭合区域的点击：pointer-events="visible" 或者直接设置pointer-events="all"

修复后的path示例代码 #

<!-- 第一个path修正拼写+调整点击区域规则 -->
<path (click)="onClick(5)" id="Selection #5"
      fill="none" stroke="black" stroke-width="1"
      pointer-events="visible"
      d="M 506.00,167.00
       C 506.00,167.00 470.00,168.00 470.00,168.00
         470.00,168.00 398.00,168.00 398.00,168.00
         398.00,168.00 399.00,208.00 399.00,208.00
         399.00,208.00 435.00,208.00 435.00,208.00
         435.00,208.00 455.00,210.00 455.00,210.00
         455.00,210.00 507.00,210.00 507.00,210.00
         507.00,210.00 507.00,182.00 507.00,182.00
         507.00,182.00 506.00,167.00 506.00,167.00 Z" />

内容的提问来源于stack exchange，提问作者Mawg