如何在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 事件（注意data-linksvg 中的 而不是(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 并检查所有具有数据链接属性的元素，然后将单击事件侦听器绑定到您想要的任何内容。

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]);
          });
        });
    }
}