OP的演示展示了一个使用Angular监听SVG元素上的click事件的正确示例。为了简化一点，main.html文件可以如下所示：

<svg width="500" height="500" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path 
     (click)="click($event)"
      style="fill: none; stroke: #000000; stroke-width: 1px;"
      d="M 10.280374,48.130842 V 26.168224 H 52.336448 V 70.794392 H 26.869158 V 50 h -7.476635"
    />
</svg>

我还将从StackBlitz复制OP的main.ts代码，以便其他人将来可以测试它：

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  templateUrl: `./main.html`,
})
export class App {
  name = 'Angular';
  click(e: MouseEvent) {
    console.log('DING DONG', e.target);
  }
}

bootstrapApplication(App);

上面的方法将适用于e.target指向正确的路径元素。
“元素的填充区域不可点击”的真正原因是别的。因为没有填充（由于CSS属性fill:none），默认情况下你只能点击笔划。当笔划很细时，很难点击元素。
如果你不需要支持旧的浏览器，解决方案是在path元素中添加一个css属性pointer-events: all（关于这个属性的更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events）。
要支持旧版浏览器，您可以使用fill: rgba(0,0,0,0)或fill: transparent，或者任何带有fill-opacity: 0的填充颜色。不过，这会降低性能，因为浏览器可能会尝试在这些区域的背景上绘制“透明色”（虽然不绘制背景的结果是完全相同的，就像乘以1再加上0一样）