amchart에 가시면 각국 나라를 무료로 다운받아서 커스텀해서 사용할 수 있습니다.
그중 한국을 클릭하여 접근하여 svg파일을 다운로드합니다.
![](./files/attach/images/108/900/306/787881b24c28ad0b32e8fb592a0eb5df.png)
이동하여 원하는 파일(High, Low 버전)을 받으시면 svg파일을 다운로드 받으실 수 있습니다.
![](./files/attach/images/108/900/306/6e8399ba5d0efacd018071870650196f.png)
다운로드 받아서 열어보면 간단하게 특별시, 광역시, 도 정도로 된 한국맵을 볼 수 있는데,
간단하게 색상 변경이나 클릭이벤트를 추가해보겠습니다.
![](./files/attach/images/108/900/306/8d41f152868eb44816e6df197c7e3a07.png)
열어보면 굉장히 복잡한 태그들이 보일텐데 우린 여기서 중요하게 볼건
path 태그들입니다.
![](./files/attach/images/108/900/306/bde2718915a7aa85b85d4b2fe0a05486.png)
각각의 path들이 지도를 그리고 있으므로 해당부분의 아이디값에 click이벤트 또는 인라인 스타일 태그나 클래스값을
개별적으로 처리하여 색상처리를 하면 값을 바꿀 수 있습니다.
기본적으로 처리되어있던 클래스 title이 서울로 되어있는 부분에 class를 추가한 후 파란색으로 변경해보겠습니다.
![](./files/attach/images/108/900/306/874e070910d388a1bd9ce17b09c8e635.png)
SeoulLand라는 클래스를 추가한 후 style태그에서 fill을 추가하였습니다.
![](./files/attach/images/108/900/306/0ccc171fe0d4aef5fa3150e23dbc8f11.png)
그럼 아래와 같이 지도가 변경된 걸 볼 수 있습니다.
![](./files/attach/images/108/900/306/04b9ef5c901039b6ffc6a120872c4eb2.png)
좀 더 그럴싸 해보이도록 hover속성도 추가해보겠습니다.
![](./files/attach/images/108/900/306/93b8991f2fcf26a4eb9490a55310c21b.png)
모든 지역인 path태그들은 land 클래스가 처리 되어있으므로 land클래스에 hover속성을 추가하여 간단하게 변경이 가능합니다.
![](./files/attach/images/108/900/306/22fa8df9570da6ff06f803ffdedea7e1.png)
클릭 이벤트 또한 간단한 예시를 보겠습니다.
![](./files/attach/images/108/900/306/7f502739c8cef386efef95021e1fe335.png)
id에 이벤트 처리를 하셔도 되지만 간단한 예제를 보기 위해 태그 내부에 onclick속성을 주었습니다.
서울 부근을 클릭하게 되면 아래와 같이 alert가 동작하는 것을 볼 수 있습니다.
![](./files/attach/images/108/900/306/c9b7eff5c9f32e5333c64d2ca5ada567.png)
svg내부의 태그가 길어서 간단하게 소스들을 캡처로 대처하였습니다.