:hover가 SVG 요소에서 작동하지 않는 이유는 무엇이며 대안은 무엇입니까?

SVG USE 요소 및 :hover 스타일 – 브라우저 지원 문제

< 방어> 를 사용하면 일부 브라우저에서는 제한이 발생할 수 있습니다.

브라우저 지원 제한

SVG 사양에는 CSS2 선택기를 개념적으로 복제된 DOM에 적용할 수 없다고 명시되어 있습니다. 에 의해 참조되는 요소의 트리입니다. 이는 :hover를 사용하여 포함된 개체 내의 특정 요소를 대상으로 지정할 수 없음을 의미합니다.

Firefox의 예외

Firefox는 예외적으로 "가상" 주소 지정을 지원합니다. " 요소는 를 통해 포함됩니다. 벌레 구멍. 그러나 다른 브라우저는 이 기능을 공유하지 않습니다.

currentColor를 사용하는 대체 접근 방식

:hover에 의존하는 대신 더 널리 지원되는 접근 방식은 참조된 색상을 설정하는 것입니다. 요소의 채우기 또는 획 값을 currentColor로 설정합니다. 요소를 마우스로 가리키면 참조된 요소의 채우기 또는 획 색상이 그에 따라 변경됩니다.

예는 다음과 같습니다.

<svg version="1.1" width="640" height="480"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">

  <style type="text/css">
    #p0 {fill:currentColor}
    #use1:hover {color:green}
    #use2:hover {color:red}
    #use3:hover {color:blue}
  </style>

  <defs>
    <polygon>

이 기술을 사용하면 포함된 SVG의 채우기 또는 획 색상을 효과적으로 변경할 수 있습니다. 요소 위에 마우스를 올리면 해당 요소에 대한 :hover 효과를 흉내낼 수 있습니다.

위 내용은 :hover가 SVG 요소에서 작동하지 않는 이유는 무엇이며 대안은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!