How to use routerLink inside SVG path?

Question

Hello

Is there a way to make routerLink Angular 6 inside different elements of one SVG?

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

Thanks

score 0 · Answer 1 · answered Feb 10 '20 at 13:51

A way I found to do this is by adding a data attribute to the svg and dynamically assign the onclick event in Angular (notice the data-link in the svg instead of (click), I also added a wrapper div but you don't necessarily need it, in that case, add the #imageContainer to the svg tag directly)

<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>

And in the Angular component, you get the container div and check for all the element with a data-link attribute then bind the click event listener to whatever you want.

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

score 0 · Answer 2 · answered Dec 12 '21 at 10:16

To complement @carak's answer, it is useful to take into account what @Sajeetharan pointed out here: I'm getting "Property 'router' does not exist on type 'SigninComponent'." while using this.router.navigate(['/dashboard']); in angular 4

"You need to pass it inside the constructor as follows,

constructor(private router: Router){
}

Also make sure you have imported Router as follows

import { Router } from '@angular/router';

"

How to use routerLink inside SVG path?

2 Answers2