호버에서 SVG의 색상을 변경하십시오

SVG에는 다양한 응용 방법이 있으며 다른 응용 방법에 따라 다른 상태에서 SVG를 변경하는 색상 전략 (호버 : 호버, 활성화 : 활성, 초점 : 초점, 클래스 이름 변경 등)도 다릅니다. 별도로 살펴 보겠습니다.

인라인 SVG

인라인 SVG는 SVG를 사용하는 개인적으로 가장 좋아하는 방법입니다. 부분적으로 액세스 및 스타일이 쉽기 때문입니다.

아이콘 글꼴을 사용하는 데 익숙하다면 약간의 색상 변화가 마음에들 수 있습니다. 아이콘 글꼴은 단색으로 다소 제한되지만 SVG는 그렇지 않지만 여전히 아이콘 글꼴의 흑백을 변경하는 것은 매우 쉽습니다. 인라인 SVG를 사용하면 SVG 내의 모든 요소로 계단식으로 채우는 fill 속성을 설정하거나 필요한 경우 각 요소를 개별적으로 채울 수 있습니다.

SVG 기호/사용

소위 SVG 스프라이트 다이어그램이 있으며, 이는 일련의 변환 세트입니다.<symbol></symbol> 주어진 아이콘이 통과 할 수 있도록 요소의 SVG<use></use> 요소는 쉽게 참조됩니다.

외부 CSS를 통해 여전히 채우기 색상을 쉽게 설정할 수 있지만 몇 가지 메모가 있습니다.

• 내부 SVG 요소 (예 :<path></path> ) 그 자체는 패딩이 없을 수 있습니다. 이를 통해 패딩이 부모 SVG에서 Cascading을 할 수 있습니다.<use></use> 섀도우 돔이 만들어졌습니다. 일단 당신이 들어가면<symbol></symbol> 비슷한 추가<path ... fill="blue"></path> 외부 CSS의 통제력을 잃습니다.
• 다시 말하지만, Inline SVG와 마찬가지로 SVG 내의 개별 요소의 충전을 제어 할 수 없습니다. 이것은 기본적으로 흑백 영역에 있다는 것을 의미합니다. 이것은 대부분의 사용 사례를 다루지 만 여전히 제한 사항입니다.

SVG 배경 이미지

SVG는 PNG, JPG 또는 기타 그래픽 형식과 같은 배경 이미지로 설정할 수 있습니다. 이 시점에서, 당신은 기본적으로 채우기를 바꿀 수있는 능력을 포기합니다. 한 가지 가능성은 (특히 좋다고 생각하지 않습니다) 각 그래프 표준에 대해 두 가지 버전을 준비하고 다른 색상을 사용한 다음 다음 사이를 전환하는 것입니다.

자원을 전환하고 싶지 않다면 나는 당신을 비난하지 않으므로 또 다른 가능성은 복잡한 필터를 사용하는 것입니다.

올바른 색상을 얻기 위해 올바른 필터를 조정하는 것은 까다로운 일입니다. 다행히 Barrett Sonntag는 필터를 계산하는 데 도움이되는 도구를 만들었습니다! 검은 색으로 바꾸는 것은 invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%) 과 같은 이상한 조합으로 끝납니다.

SVG는 또한 object 속성을 가지고 있는데, 이는 과거에 매우 간결한 폴백 메커니즘이 있었기 때문에 매우 간결했습니다. 요즘 브라우저 지원이 매우 좋지만 솔직히 사용하지 않았습니다. 그러나 사용하는 경우 호버링시 색상을 전환하기 위해이 필터 기술을 사용해야 할 수도 있습니다.

배경 이미지 대신 마스크를 사용하십시오

이런 식으로 SVG는 여전히 모양을 그리는 책임이 있지만 색상은 SVG 자체가 아닌 그 뒤의 배경색 (또는 그림! 또는 그라디언트!)에서 나옵니다.

데이터 URL로서 SVG 배경 이미지

이것은 위의 방법과 크게 다르지 않지만 내부 패딩에 변수를 사용하는 흥미로운 가능성을 제공합니다. 다음은 URL을 변수로 유지하기 위해 SASS를 사용하는 예입니다.

기본 CSS 사용자 정의 속성을 사용하여이를 달성 할 수 있습니다!

위 내용은 호버에서 SVG의 색상을 변경하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!