
[Web] 어도비 일러스트레이터를 활용해 만든 도형으로 SVG Vector hover 기능 추가하기 / Html, javascript
·
Project/Web Project
이렇게 SVG 파일만으로 html을 활용하여 웹에서 도형과 상호작용하는 방법에 대해 알아보겠습니다. 먼저 일러스트레이터 파일을 불러옵니다. 예시 도형으로 네모를 만들겠습니다. 그리고 레이어를 분리해줍시다.XML 파싱되어있을때, 각 도형을 사용하려면 레이어를 분리해주고 각 도형에 id를 붙여주면 좋습니다. 이름도 변경해줍시다. 그리고 새로운 도형을 추가하기 전에 레이어를 추가해줍니다.레이어 메뉴바의 하단에 보면 레이어 만들기가 있습니다. 그럼 새로 만든 레이어 이름은 points 로 해주겠습니다. 저는 이렇게 원 도형 세개를 추가했습니다. 이것들도 각각 도형 이름을 바꿔줍시다 window -> SVG interaction 등을 이용해서 어도비일러스트 자체에서 코드를 삽입하여 SVG 와 상호작용할 수 있는..