CSS를 사용하여 SVG 요소에 그라디언트를 적용하는 방법은 무엇입니까?

CSS를 사용하여 SVG 요소에 그라디언트 적용

SVG 각형 요소에 그라디언트를 구현하려면 SVG의 강력한 그라디언트 기능과 함께 CSS를 활용해야 합니다. 각형 요소의 채우기 속성을 사용하면 그라데이션 적용이 가능합니다.

선형 그라데이션을 만들려면 스타일시트에 다음 CSS 규칙을 추가하세요.

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

이제 SVG 파일 내에서 다음을 정의하세요. 및 요소:

<defs>
    <linearGradient id="MyGradient">
        <stop offset="5%" stop-color="#F60" />
        <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
</defs>

여기서 그라데이션은 요소 길이를 따라 5%의 #F60부터 95%의 #FF6까지입니다. 색상과 오프셋 비율을 조정하여 그라디언트를 사용자 정의할 수 있습니다.

마지막으로 직사각형 요소의 채우기 속성을 사용하여 그라디언트를 참조하세요.

<rect width="100" height="50" fill="url(#MyGradient)"/>

이 접근 방식을 사용하면 아름답고 CSS를 사용하여 SVG 요소에 동적 그라데이션을 적용하여 웹 애플리케이션의 시각적 매력과 사용자 경험을 향상합니다.

위 내용은 CSS를 사용하여 SVG 요소에 그라디언트를 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!