우수 답변
프로젝트에서 SVG를 사용 / 포함하는 방법에는 여러 가지가 있습니다. 어떤 방식에 따라 다른 상태 또는 조건에서 SVG를 다시 칠하는 전술
- 인라인 SVG-직접 SVG 코드 삽입
HTML :이 XML 코드로 인해 SVG 이미지로 얻은 것입니다.
CSS : Fill 속성을 사용하여 SVG의 색상을 변경할 수 있습니다. HTML 코드를 사용하여 생성되므로 SVG가 생성 된 경로의 색상을 변경해야합니다.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
2. SVG Symbol / Use-USE HTML 태그를 사용하여 SVG 코드의 파일을 임베드하고 거기에서 가져옵니다.
HTML : 이것은 다음을 사용하여 다른 파일에서 SVG 이미지를 내보낼 수있는 방법입니다. HTML 태그를 사용합니다.
CSS : 첫 번째 것과 동일한 방식으로 방금 내보내기 기술을 변경했습니다. 기술은 수십 개의 SVG 이미지가 있고 HTML 페이지를 복잡하게 만들고 싶지 않을 때 사용되므로 하나의 파일로 내 보내야하고 거기에서 가져올 수 있습니다.
svg { width: 70px; height: 70px;}svg:hover { fill: red;}
3. SVG 배경 이미지-다른 그래픽 형식과 같이 이미지를 설정합니다.
이것은 두 개의 이미지를 호출해야하거나 선택한 상태에 따라 원하는 조건만큼 간단합니다.
.icon { background-image: url(icon-black.svg);}
.icon:hover,.icon-bike:focus { background-image: url(icon-red.svg);}
4. CSS 필터 속성 사용-별로 권장되지 않음
다른 브라우저에서 지원되는 동작이 아니므로 권장하지 않음 .
.icon:hover { filter: invert(27\%) sepia(51\%) saturate(2878\%) hue-rotate(346deg) brightness(104\%) contrast(97\%);}
감사합니다. 이것이 효과가 있다면 Upvote하십시오.
즐겨 배우십시오 !!