SVG로 지도 만들기

1. 국가별 지도

---

세계지도와 같은 다른 국가별 지도를 SVG파일로 다운 받기 위해서 아래 사이트를 참고하면 됩니다.

https://www.amcharts.com/svg-maps/

Free SVG Maps - amCharts

국가의 스타일

hover로 스타일 적용하기

HTML

<div class="one"></div>
    <img src="./southKoreaHigh.svg" alt="" class="two" />
    <object
      data="./southKoreaHigh.svg"
      type="image/svg+xml"
      class="three"
    ></object>
    <?xml version="1.0" encoding="utf-8"?>

CSS

      .one {
        width: 100vw;
        height: 100vh;
        background: url(./southKoreaHigh.svg);
      }

      .two {
        width: 100vw;
        height: 100vh;
      }

      .three {
        width: 100vw;
        height: 100vh;
      }
      path:hover {
        fill: red;
        stroke: blue;
        stroke-width: 5px;
        stroke-opacity: 0.5;
      }
       svg {
        width: 100vw;
        height: 100vh;
      }
      /* 4번째에서만 작동하고 3번째 object 태그에서도 작동하게 하려면 안에 inline으로 넣어주셔야 합니다. */

 

---

2. 대한민국 지도를 읍,면,동으로 분할하는 방법

---

대한민국 지도를 읍,면,동 단위로 쪼개야 할 경우에는 해당 유튜브를 참고하면 됩니다.

https://youtu.be/c0EQWKN5kh4