SVG上的Angular js ngbdropdown click事件

Question

我有以下代码段：

<span ngbDropdown #userDropdown="ngbDropdown" (click)="onClick()">
    <svg style="width:20px;height:20px;" aria-hidden="true" focusable="false"
         data-prefix="fas" data-icon="ellipsis-v"
         class="svg-inline--fa fa-ellipsis-v fa-w-6" role="img" 
         xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512">
      <path fill="currentColor" d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"></path>
    </svg>
    <span class="dropdown-toggle" ngbDropdownToggle>
    </span>
    <span class="dropdown-menu dropright" ngbDropdownMenu>

    </span>
</span>

我也尝试将onclick的click事件附加到svg区域元素，但是由于某些原因，仅当我单击ngbdropdown上的下拉箭头时，才会触发click事件。

如何将click事件附加到svg元素上？

谢谢！