728x90
반응형
이렇게 SVG 파일만으로 html을 활용하여 웹에서 도형과 상호작용하는 방법에 대해 알아보겠습니다.
먼저 일러스트레이터 파일을 불러옵니다.
예시 도형으로 네모를 만들겠습니다.
그리고 레이어를 분리해줍시다.
XML 파싱되어있을때, 각 도형을 사용하려면 레이어를 분리해주고 각 도형에 id를 붙여주면 좋습니다.
이름도 변경해줍시다.
그리고 새로운 도형을 추가하기 전에 레이어를 추가해줍니다.
레이어 메뉴바의 하단에 보면 레이어 만들기가 있습니다.
그럼 새로 만든 레이어 이름은 points 로 해주겠습니다.
저는 이렇게 원 도형 세개를 추가했습니다.
이것들도 각각 도형 이름을 바꿔줍시다
window -> SVG interaction 등을 이용해서 어도비일러스트 자체에서 코드를 삽입하여 SVG 와 상호작용할 수 있는 방법도 있긴 합니다. 해당 방법은 기회가 된다면 설명드리겠습니다.
저장합시당
그러면 만들어진 이미지는 아래와 같습니다.
그리고 해당 파일을 눌러서 개발자도구를 활용해보면 다음과 같이 파싱되어있는 것을 확인 할 수 있습니다.
이제 코드상에서 해당 이미지를 불러와서 인터렉션해봅시다.
그럼 아래의 코드를 활용해서 웹에서 확인해봅시다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Independent Target SVG</title>
<style>
.st0, .st1 {
fill: #8d8d8e;
stroke: #000;
stroke-width: 1;
transition: fill 0.2s ease;
}
.st0:hover, .st1:hover {
fill: red;
cursor: pointer;
}
/* 원본 object는 보이지 않게 처리 (렌더는 됨) */
#mySVG {
position: absolute;
left: -9999px;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
</style>
</head>
<body>
<!-- 원본 SVG: 파싱용 -->
<object id="mySVG" type="image/svg+xml" data="static/src/test.svg"></object>
<!-- 우리가 실제로 렌더링할 SVG -->
<svg id="targetSVG" viewBox="0 0 595.3 841.9" width="600"></svg>
<script>
document.getElementById("mySVG").addEventListener("load", function () {
const svgDoc = this.contentDocument;
const backLayer = svgDoc.getElementById("background"); // ✅ 오타 수정됨
const pointLayer = svgDoc.getElementById("points");
const targetSVG = document.getElementById("targetSVG");
// 배경 레이어 붙이기
if (backLayer) {
const importedBackground = document.importNode(backLayer, true);
targetSVG.appendChild(importedBackground);
}
// 포인트 레이어 붙이기
if (pointLayer) {
const importedPoints = document.importNode(pointLayer, true);
targetSVG.appendChild(importedPoints);
importedPoints.querySelectorAll("circle").forEach(el => {
el.classList.add("st1"); // 또는 "st0" 둘 다 hover됨
});
}
});
</script>
</body>
</html>
응용하면 아래와 같이 만들 수 있습니다.
그럼 다들 행복한 연구생활하시길...
728x90
반응형