:hover 스타일이 SVG 요소에서 작동하지 않는 이유는 무엇이며 이 문제를 어떻게 해결할 수 있습니까?

사용 및 :hover 스타일을 사용하여 삽입된 SVG 요소 해결

문제 이해

<사용> 태그를 사용하면 어려움을 겪을 수 있습니다. 이는 를 통해 참조되는 요소가 다음과 같은 사실에서 발생합니다. 형식적인 문서 구조의 일부가 아니기 때문에 CSS 선택기로 직접 처리하기가 어렵습니다.

hover 스타일이 작동하지 않는 이유

SVG 사용 요소 사양에 따라 CSS 선택기는 참조된 요소가 있는 개념적 DOM 트리에는 적용할 수 없습니다. 이는 :hover 의사 클래스가 이러한 요소에서 작동하지 않아 대화형 스타일을 적용할 수 없음을 의미합니다.

Firefox 예외

대부분의 브라우저는 < use>의 경우 Firefox는 예외입니다. 참조된 요소에서 값을 'currentColor'로 설정하고 의 색상 속성을 변경하여 채우기 또는 획 색상을 수정할 수 있습니다.

대체 접근 방식

내장된 SVG 요소에 호버 효과를 얻는 또 다른 방법은 'currentColor'를 활용하는 것입니다. 참조된 요소의 채우기 또는 획 속성을 'currentColor'로 설정하고 요소를 마우스로 가리키면 브라우저는 상속된 현재 색상을 업데이트할 수 있습니다. 이 기술은 :hover 의사 클래스가 제공하는 전체 스타일링 기능을 제공하지 않더라도 해결 방법을 제공합니다.

예

다음 SVG 코드를 고려하세요.

<svg>
  <style>
    #p0 { fill: currentColor; }
    #use1:hover { color: green; }
    #use2:hover { color: red; }
    #use3:hover { color: blue; }
  </style>

  <defs>
    <polygon>

각 <사용> 요소의 각 모양은 :hover 규칙에 지정된 색상에 따라 녹색, 빨간색 또는 파란색으로 색상이 변경됩니다.

위 내용은 :hover 스타일이 SVG 요소에서 작동하지 않는 이유는 무엇이며 이 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!