CSS로 SVG 색상을 변경하는 방법

CSS에서는 스트로크 속성을 사용하여 svg의 색상을 변경할 수 있습니다. svg의 폴리라인 태그에 대해 "획: 색상 값" 스타일만 설정하면 됩니다. 스트로크 속성은 선, 텍스트 또는 요소 외곽선 색상을 정의하며 값은 색상과 동일하며 rgba 투명 채널을 지원합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

때때로 CSS를 사용하여 svg를 직접 제어할 수도 있습니다. svg는 jpg 및 png와 같은 이미지 형식으로 사용할 수도 있고 태그 형식으로 직접 사용할 수도 있습니다. 전자는 색상을 설정할 수 없지만 후자는 색상을 설정할 수 있습니다.

예:

<svg width="8px" height="12px" viewBox="0 0 8 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 47.1 (45422) - http://www.bohemiancoding.com/sketch -->
    <title>Rectangle 8 Copy 10</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
        <polyline id="Rectangle-8-Copy-10" stroke="#8F99AE" stroke-width="2" transform="translate(2.242641, 6.242641) scale(1, -1) rotate(-135.000000) translate(-2.242641, -6.242641) " points="5.24264069 9.24264069 -0.757359313 9.24264069 -0.757359313 3.24264069 -0.757359313 3.24264069"></polyline>
    </g>
</svg>

효과:

색상을 변경하는 코드 추가

 svg g polyline {
    stroke: red;
}

효과:

추천 학습: css 비디오 튜토리얼

위 내용은 CSS로 SVG 색상을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!