HTML5 SVG + CSS + JS로 유연한 마우스 영역 실현

7147 단어 HTML자바스크립트SVGCSSHTML5
HTML5에서 지원하는 <svg> 요소와 CSS, JavaScript를 조합하여 마우스 처리하는 복잡한 형태의 영역을 만듭니다. 다음과 같은 간토 지방의 지도 데모를 만들었습니다. 도도부현의 형태에 따라 마우스 이벤트가 발화하는 것이, 확인할 수 있을까 생각합니다.


Kanto SVG map - CodePen

소개



HTML5에서 지원하는 <svg> 요소를 사용하면 HTML 문서 내에 SVG를 그릴 수 있으며 기존의 직사각형(<div> 등)만으로는 어려웠던 복잡한 형태의 요소도 배치할 수 있게 되었습니다. SVG 이미지를 그릴 뿐만 아니라, <svg> ... </svg> 내의 요소 ( <path> 이나 <rect> )에, 지금까지의 HTML 문장과 같이, CSS에 의한 스타일의 지정이나, JavaScript에 의한 요소의 변경, 이벤트 리스너의 등록 가능합니다.

지금까지 <area> 태그로 지정하고 있던 마우스의 처리의 범위도, SVG로부터 작성할 수가 있습니다. SVG를 사용하면 Inkscape와 같은 시각적으로 이해하기 쉬운 도구를 사용하여 경로를 만들 수 있습니다.

HTML 설명



HTML에 포함시킬 SVG를 준비하는 것은 Inkscape를 사용하는 것이 빠릅니다. SVG에서 적절한 경로를 만들고 출력 파일 형식을 Plain SVG로 파일로 내 보냅니다. Plain SVG는 Inkscape에서 사용하는 데이터를 삭제한 SVG 형식입니다. 그러나 여전히 불필요한 메타 정보 등이 부여되므로 텍스트 편집기에서 삭제한 다음 HTML에 붙여넣습니다.
<!DOCTYPE html>
<html>
  <body>
    <svg width='240' height='262' >
      <path data-name='Ibaraki'  d='...' />
      <path data-name='Chiba'    d='...' />
      <path data-name='Tokyo'    d='...' />
      <path data-name='Kanagawa' d='...' />
      <path data-name='Tochigi'  d='...' />
      <path data-name='Gumma'    d='...' />
      <path data-name='Saitama'  d='...' />
    </svg>
  </body>
</html>

각 요소에 지정되는 style 속성도, 이번은 CSS로부터 일괄로 지정하므로 삭제합니다. Inkscape에는 XML 에디터도 붙어 있어, 그리기 결과를 확인하면서 불필요한 요소의 청소도 할 수 있어 편리합니다.
data-name 속성에는 도도부현명을 기술해, 나중에 JavaScript로부터 참조합니다.

CSS 설명



그런 다음 CSS에서 스타일을 작성합니다. CSS를 사용하면 다른 요소와 마찬가지로 선택기를 지정하여 스타일을 설정할 수 있습니다.
path {
  fill: #5fd35f;
  stroke: #165016;
  stroke-width: 1;
  transition-duration: 200ms;
  cursor: pointer;
}
path:hover {
  fill: #2ca02c;
}

여기서 fill나 stroke 등 평소 보지 않는 속성 이름이 많이 있다는 것을 깨닫습니다. 이것은 SVG에서 사용하는 스타일입니다. 다른 사용 가능한 속성은 W3C에서 확인할 수 있습니다.

그리고 일반 HTML 문서와 마찬가지로 path:hover 선택기 및 transition-duration 속성도 사용할 수 있습니다. 이제 CSS만으로 호버시에 색의 변화를 붙일 수 있었습니다.

자바스크립트 설명



자바스크립트 설명은 기존 HTML 요소와 마찬가지로 SVG의 요소를 처리할 수 있습니다.
function alertName(e) {
  alert('Welcome to ' + e.target.getAttribute('data-name'));
}

window.onload = function() {
  paths = window.document.querySelectorAll('path');
  for (i = 0; i < paths.length; ++i) {
    paths[i].onclick = alertName;
  }
};
window.onload 때때로, 모든 <path> 요소에 대해서, 클릭시의 이벤트를 기술하고 있습니다. 이 이벤트 내에서는 대상 data-name의 데이터를 참조하고 alert 로 표시합니다.

결론



SVG를 사용하여 <area> 태그로 바꾸는 방식으로 유연하고 쉽게 마우스 처리 범위를 지정할 수있었습니다.

다만, CodePen에서 동작은 확인할 수 있었습니다만, HTML의 사양으로서 합법인가 어떤지까지는 확인할 수 없기 때문에, 사양서를 한번 더 확인할 필요가 있습니다.
VSCode에서 SVG를 미리 보는 기능 향상
SVG로 그리는 피스 마크

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage