JavaScript를 사용하여 SVG 요소와 어떻게 상호 작용합니까?

JavaScript로 SVG 요소에 액세스

SVG(Scalable Vector Graphics)를 사용하면 디자이너가 손실 없이 동적으로 조작하고 크기를 조정할 수 있는 벡터 그래픽을 만들 수 있습니다. 품질. JavaScript로 SVG 요소에 액세스하고 조작하려면 기본 제공 브라우저 API를 사용하거나 Raphaël 또는 jQuery SVG와 같은 외부 라이브러리를 활용하는 두 가지 주요 옵션이 있습니다.

내장 브라우저 API 사용

기본 JavaScript 접근 방식에는 DOM(문서 개체 모델)을 사용하여 SVG 요소에 액세스하는 작업이 포함됩니다.

1. SVG 개체에 대한 참조 가져오기:

   const svgObject = document.getElementById("mySVG");

   로그인 후 복사

2. ID로 개별 요소에 액세스:

   const deltaPath = svgObject.contentDocument.getElementById("delta");

   로그인 후 복사

3. 요소 속성 조작:

   deltaPath.setAttribute("fill", "#00FF00");

   로그인 후 복사

4. 사용자 상호 작용에 응답하기 위해 이벤트 리스너를 추가합니다.

   deltaPath.addEventListener("click", () => {
     alert("Hello World!");
   });

   로그인 후 복사

참고: 이 접근 방식을 사용하려면 SVG가 HTML 파일과 동일한 도메인에 로드되어야 합니다. 동일 출처 정책.

외부 라이브러리 사용

또는 Raphaël 또는 jQuery SVG와 같은 외부 라이브러리를 활용할 수 있습니다.

1. HTML에 라이브러리 포함:

   <script src="raphael.js"></script>

   로그인 후 복사

2. 라이브러리를 사용하여 SVG 요소 생성 및 조작:

   var paper = Raphael("mySVG");
   var deltaPath = paper.path("M34.074,86.094...");
   
   deltaPath.click(function() {
     alert("Hello World!");
   });

   로그인 후 복사

접근방식 비교

위 내용은 JavaScript를 사용하여 SVG 요소와 어떻게 상호 작용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!