angular - 如何在 SVG 路径中使用 routerLink？

Question

你好

有没有办法在一个 SVG 的不同元素中制作 routerLink Angular 6？

<svg  width="256.53mm" height="269.27mm" version="1.1" viewBox="0 0 256.53 269.27" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

 <g  transform="translate(22.348 -13.007)" fill="none" stroke="#000" stroke-width=".26458px">
    <path (click)="goBalises()" id="gauche" d="m142.13 129.55 90.991-30.211 0.92948 103.56-91.145-25.734z"/>
    <path id="haut" d="m83.534 104.61-28.726-91.47 103.57 0.75595-27.214 90.714z"/>
    <path id="droite" d="m69.467 174.31-91.088 29.916-0.59389-103.57 91.061 26.03z"/>
    <path id="bas" d="m130.05 190.78 29.533 91.213-103.57 0.15841 26.412-90.951z"/>
 </g>
</svg>

goBalises(){
    this.router.navigate(['/balises']);
  }

谢谢

Answer 1

我发现这样做的一种方法是向 svg 添加一个 data 属性并在 Angular 中动态分配 onclick 事件(注意 svg 中的 data-link 而不是 (click) ，我还添加了一个包装器 div 但你没有一定需要它，在这种情况下，将 #imageContainer 直接添加到 svg 标签中)

<div #imageContainer>
    <svg  width="256.53mm" height="269.27mm" version="1.1" viewBox="0 0 256.53 269.27" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

     <g  transform="translate(22.348 -13.007)" fill="none" stroke="#000" stroke-width=".26458px">
        <path data-link='balise' id="gauche" d="m142.13 129.55 90.991-30.211 0.92948 103.56-91.145-25.734z"/>
        <path id="haut" d="m83.534 104.61-28.726-91.47 103.57 0.75595-27.214 90.714z"/>
        <path id="droite" d="m69.467 174.31-91.088 29.916-0.59389-103.57 91.061 26.03z"/>
        <path id="bas" d="m130.05 190.78 29.533 91.213-103.57 0.15841 26.412-90.951z"/>
     </g>
    </svg>
</div>

在 Angular 组件中，您获取容器 div 并检查所有具有 data-link 属性的元素，然后将 click 事件监听器绑定(bind)到您想要的任何内容。

export class SvgImage {
    @ViewChild('imageContainer', {static: false}) container: ElementRef<HTMLElement>;

    initLinks() {
        if (!this.container || !this.container.nativeElement) {
          return;
        }

        var links = this.container.nativeElement.querySelectorAll('[data-link]');

        links.forEach(val => {
          var converted = <HTMLElement>val;
          converted.addEventListener('click', () => {           
            this.router.navigate([link]);
          });
        });
    }
}