메뉴 건너뛰기

조회 수 930 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

amchart에 가시면 각국 나라를 무료로 다운받아서 커스텀해서 사용할 수 있습니다.

 

 

 

그중 한국을 클릭하여 접근하여 svg파일을 다운로드합니다.

 

 

 

 

 

 

 

 

이동하여 원하는 파일(High, Low 버전)을 받으시면 svg파일을 다운로드 받으실 수 있습니다.

 

 

 

 

 

 

다운로드 받아서 열어보면 간단하게 특별시, 광역시, 도 정도로 된 한국맵을 볼 수 있는데,

간단하게 색상 변경이나 클릭이벤트를 추가해보겠습니다.

 

 

 

 

 

열어보면 굉장히 복잡한 태그들이 보일텐데 우린 여기서 중요하게 볼건

path 태그들입니다.

 

 

 

 

각각의 path들이 지도를 그리고 있으므로 해당부분의 아이디값에 click이벤트 또는 인라인 스타일 태그나 클래스값을

개별적으로 처리하여 색상처리를 하면 값을 바꿀 수 있습니다.

 

기본적으로 처리되어있던 클래스 title이 서울로 되어있는 부분에 class를 추가한 후 파란색으로 변경해보겠습니다.

 

 

 

 

SeoulLand라는 클래스를 추가한 후 style태그에서 fill을 추가하였습니다.

 

SeoulLand css

 

 

 

 

그럼 아래와 같이 지도가 변경된 걸 볼 수 있습니다.

 

특정 지역만 색 변경

 

 

 

 

좀 더 그럴싸 해보이도록 hover속성도 추가해보겠습니다.

 

 

 

 

 

모든 지역인 path태그들은 land 클래스가 처리 되어있으므로 land클래스에 hover속성을 추가하여 간단하게 변경이 가능합니다.

 

 

 

 

hover 효과

 

 

 

 

 

 

 

클릭 이벤트 또한 간단한 예시를 보겠습니다.

 

 

 

 

id에 이벤트 처리를 하셔도 되지만 간단한 예제를 보기 위해 태그 내부에 onclick속성을 주었습니다.

서울 부근을 클릭하게 되면 아래와 같이 alert가 동작하는 것을 볼 수 있습니다.

 

클릭 이벤트 추가

 

svg내부의 태그가 길어서 간단하게 소스들을 캡처로 대처하였습니다.

 

 

 


List of Articles
번호 제목 날짜 조회 수
47 유효한 링크인지 확인하는 JAVASCRIPT 2019.01.16 113560
46 금액에 점찍고 한글 표시하기 2019.01.16 1517
45 텍스트박스 입력제한(숫자,영문,한글,특수기호) 2019.01.16 2060
44 span - 동적으로 글자 바꾸기, 보이기 안보이기 2019.01.16 1628
43 풍선도움말 2019.01.16 1251
42 랜덤 배너 노출 스크립트 2019.04.29 11313
41 Alert, Confirm을 모달 팝업으로 만들기 file 2021.03.09 4048
40 Javascript - 이미지 미리보기 회전되어 나옴(EXIF) file 2021.03.09 37047
39 Javascript - 화면 캡처 후 서버에 저장하기(html2canvas 사용법, 주의사항) file 2021.03.09 2300
38 Javascript - 입력한 년, 월의 마지막 날짜 구하기 2021.03.09 279
37 Javascript - Calendar 달력 생성하고 제어하기 2021.03.09 567
36 Javascript - 사업자 등록번호 유효성 체크 file 2021.03.09 1145
35 Javascript - 유효성 체크(이메일 정규식, IP 정규식, 비밀번호 등) 2021.03.09 797
34 javascript - vanillaJS로 체크박스(checkbox) 제어하기 file 2021.03.09 631
33 Javascript - form태그 내부 ajax처리시 2번 전송되는 현상 2021.03.09 344
» Javascript - Free SVG 한국맵 제어 처리 file 2021.03.09 930
31 Javascript - 입력받은 숫자를 순서대로 홀짝 별로 배열에 삽입하기 2021.03.09 351
30 HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) file 2021.03.09 803
29 jqgrid 이용한 그리드 활용하기 file 2021.03.25 2462
28 오브젝트 속성 2021.03.25 411
Board Pagination Prev 1 ... 4 5 6 7 8 9 10 11 12 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved