CSS :hover 스타일을 SVG 요소에 적용할 수 있나요?

Hover 스타일을 SVG USE 요소에 적용할 수 있습니까?

CSS :hover pseudoclass를 사용하는 섹션은 어려울 수 있습니다. DOM에 존재함에도 불구하고 이러한 요소는 SVG의 구조로 인해 직접 타겟팅될 수 없습니다.

문제 이해:

SVG 사양에서는 복제가 다음과 같이 지정됩니다. DOM 트리 섹션에는 CSS 속성이나 캐스케이드 값이 포함되어 있지 않습니다. 즉, CSS2의 선택기는 참조된 요소 내의 복제된 요소에 적용될 수 없으므로 :hover 스타일을 사용하여 이러한 요소를 직접 대상으로 지정하는 것이 불가능합니다.

Firefox의 부분 지원:

대부분의 브라우저는 내 가상 요소의 직접 타겟팅을 지원하지 않습니다. 참고로 Firefox는 부분적인 지원을 제공합니다. 참조된 요소에 currentColor를 할당한 다음 의 색상 속성을 변경하여 채우기 또는 획 색상을 수정할 수 있습니다.

제한된 브라우저 지원:

그러나 이 접근 방식은 호환성이 제한적이므로 특별히 Firefox를 대상으로 하는 경우에만 사용해야 합니다. 브라우저 간 호환성을 위해서는 다른 방법을 사용해야 합니다.

대체 솔루션:

이 문제를 해결하는 한 가지 방법은 JavaScript를 사용하여 런타임에 SVG DOM을 조작하는 것입니다. 가상 요소에 호버 스타일을 동적으로 적용합니다. 이 접근 방식은 더 많은 유연성을 제공하지만 추가 스크립팅이 필요하며 모든 시나리오에 적합하지 않을 수 있습니다.

또 다른 솔루션은 마스크와 결합된 요소. 섹션을 요소를 사용하면 가상 요소를 직접 타겟팅하지 않고도 의사 호버 효과를 얻을 수 있습니다. 이 방법은 더 나은 브라우저 지원을 제공하며 SVG 원칙에 더 가깝습니다.

결론:

를 사용하여 포함된 SVG 요소에 :hover 의사 클래스 적용 태그는 SVG 사양의 제한으로 인해 간단하지 않습니다. Firefox에는 부분적인 지원이 있지만 브라우저 간 호환성을 위해 JavaScript 조작 또는 마스킹을 고려해야 합니다.

위 내용은 CSS :hover 스타일을 SVG 요소에 적용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!