[Angular] SVG path element click 이벤트 함수 실행하는 방법

Intro

안녕하세요. 앵귤러에서 SVG path element에 click 이벤트 함수 실행하는 방법에 대해 알아보도록 하겠습니다. 

 

 

My Case

제 케이스의 경우 특정 SVG 요소를 클릭했을 때 함수를 호출하도록 하고 싶었습니다. 따라서 아래와 같이 구현하였습니다. 

 

• svg 파일은 다음과 같습니다.

<path #myPath (click)="handleClick()" class="cls-2" d="..." transform="..."/>

 

 

• ts 파일은 다음과 같습니다.

  @ViewChild('myPath') myPath: ElementRef;

  handleClick() {
    console.log("handleClick!!");
  }

 

하지만, svg 파일의 path 요소를 클릭해도  handleClick 함수가 동작하지 않았습니다. 

 

 

Why?

클릭 이벤트가 발생하지 않는 문제는 조건이 충족하지 않았기 때문입니다. 클릭 이벤트를 처리하기 위해서는 해당 요소가 클릭이 가능한 상태여야 하기 때문입니다. path 요소는 기본적으로 클릭이 가능한 요소가 아니라고 합니다. 따라서 이를 클릭 가능한 element로 만들어줘야 합니다. 

 

참고로 path 요소 의미는 아래와 같습니다. 

The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.

 

How to solve the problem

1. path 요소에 pointer-events 속성을 추가하여 클릭 가능하도록 설정합니다.

<path #myPath class="cls-2" d="..." pointer-events="visible" transform="..."></path>

 

2. pointer-events 속성을 추가한 path 요소를 svg 태그로 감싸서 svg 요소를 클릭 가능하도록 만들어줍니다. 

<svg (click)="handleClick()">
  <path #myPath class="cls-2" d="..." pointer-events="visible" transform="..."></path>
</svg>

 

 

 

---

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths