jQuery를 사용하여 SVG 요소에 클래스를 추가할 수 없는 이유는 무엇입니까?

jQuery SVG: 클래스 추가 불가 문제 해결

jQuery SVG로 작업할 때 SVG 개체에서 클래스를 추가하거나 제거하는 데 문제가 발생할 수 있습니다. 이번 글에서는 원인을 조사하고 해결책을 제시하겠습니다.

문제:

다음 코드를 고려해보세요.

<rect>

에도 불구하고 개체를 클릭할 때 경고를 트리거할 수 있으며 "클릭" 클래스를 추가할 수 있습니다. 실패합니다.

해결책:

jQuery 3 이전에는 SVG 요소에 클래스를 추가하는 데 문제가 있었습니다. 그러나 이 문제는 jQuery 3에서 해결되었습니다. 또한 최신 브라우저는 SVG 요소에 대해 바닐라 JavaScript classList.add('newclass') 메서드를 지원합니다.

대체 jQuery 접근 방식:

jQuery를 계속 사용하려면 다음을 사용하여 클래스 속성을 직접 조작할 수 있습니다. attr():

// Add "newclass"
$("#item").attr("class", "oldclass newclass");

// Remove "newclass"
$("#item").attr("class", "oldclass");

바닐라 JavaScript 접근 방식:

jQuery 종속성을 방지하려면 다음 바닐라 JavaScript 코드를 사용하세요.

var element = document.getElementById("item");

// Add "newclass"
element.setAttribute("class", "oldclass newclass");

// Remove "newclass"
element.setAttribute("class", "oldclass");

위 내용은 jQuery를 사용하여 SVG 요소에 클래스를 추가할 수 없는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!