html5 svg_html5 튜토리얼 기술에 요소 클릭 이벤트를 추가하는 방법

최근에는 svg의 클릭 이벤트를 사용하여 캔버스 대신 svg를 사용하는 이유는 svg의 요소에서 클릭 이벤트를 추가할 수 있기 때문입니다.
Canvas와 비교. SVG(자세히 보기)
다음 표에는 캔버스와 SVG의 몇 가지 차이점이 나와 있습니다.

캔버스
• 해상도에 따라 다름
• 이벤트 핸들러가 지원되지 않음
• 약한 텍스트 렌더링 기능
• .png 또는 .jpg 형식으로 렌더링하는 기능 결과 이미지 저장
• 많은 객체가 자주 다시 그려지는 그래픽 집약적인 게임에 가장 적합

SVG
• 해상도에 의존하지 않음
• 지원되는 이벤트 핸들러
• 렌더링 영역이 큰 애플리케이션(예: Google Maps)에 가장 적합
• 복잡도가 높으면 렌더링 속도가 느려짐(DOM을 과도하게 사용하는 앱은 빠르지 않음)
• 적합하지 않음 게임 애플리케이션에서 생성된 웹 페이지

는 모바일기기 지원이 필요하기 때문에 크롬에서 정상적으로 사용이 가능합니다. 그런데, 아이패드에서 페이지를 열었을 때 클릭 이벤트가 발생하지 않는 것을 발견했습니다. 많은 정보를 확인했지만 문제의 원인은 발견되지 않았습니다. 나중에 w3c에서 svg를 설명하는 데모가 실제로 클릭 효과를 얻을 수 있다는 것을 발견했습니다. svg 요소에 onclick=이 없지만 "circle_click(evt)"에는 비슷한 설명이 있습니다. onclick="click(evt)"를 추가하면 iPad의 svg 요소에 클릭 이벤트가 있습니다. .