CSS로 SVG 배경 이미지의 스타일을 지정할 수 있나요?

CSS를 통해 SVG 배경 이미지 스타일 지정

SVG가 설정된 것과 동일한 CSS 파일을 사용하여 배경 이미지로 사용할 때 SVG 스타일을 지정할 수 있습니까?

SVG 이미지를 개별적으로 또는 스프라이트로 성공적으로 배치하고 크기를 조정하고 클리핑할 수 있지만 배경 이미지로 할당하는 동일한 CSS 파일 내에서 SVG에 스타일을 지정하는 것은 불가능합니다.

상위 요소의 클래스에 따라 모양의 색상을 변경하는 것을 목표로 하는 다음 의사 CSS 코드를 고려해보세요.

element1 {
    background-image(icon.svg);
}

element1.black .svg-pathclass {
    fill: #000000;
}

element1.white .svg-pathclass {
    fill: #ffffff;
}

SVG에 "svg-pathclass" 경로가 포함되어 있다고 가정하는 이 접근 방식은 다음과 같습니다. " 클래스는 실행 불가능합니다.

이유는 SVG와 CSS의 특성에 있습니다. SVG는 데이터 URI로 준비하거나 외부에서 참조할 수 있는 독립형 문서입니다. 다른 파일의 배경 이미지로 사용되면 CSS로 수정할 수 없는 불변 이미지가 됩니다.

위 내용은 CSS로 SVG 배경 이미지의 스타일을 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!