CSS에서 SVG 직사각형에 그라디언트를 적용하는 방법은 무엇입니까?

CSS의 SVG 그라디언트

이 질문은 SVG의 요소에 그라디언트를 적용하는 것과 관련이 있습니다. 다음 섹션에서는 CSS에서 이 기능을 구현하는 방법을 설명합니다.

채우기 속성 사용

현재 채우기 속성을 사용하여 이는 단일 색상 채우기를 설정하는 데는 효과적이지만 그라데이션에서는 잘 작동하지 않습니다.

그라디언트 사용

선형 그래디언트를 적용하려면 url() 함수를 사용하여 SVG에 정의된 그래디언트 정의를 참조해야 합니다. CSS에서 구문은 다음과 같습니다.

fill: url(#gradient-id);

여기서 #gradient-id는 SVG에서 그라데이션에 대해 정의한 ID입니다.

예

다음 코드는 요소에 선형 그래디언트를 적용하는 방법을 보여줍니다.

CSS

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

SVG

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    rect {
      fill: url(#MyGradient);
    }
  </style>
  <defs>
    <lineargradient id="MyGradient">
      <stop offset="5%" stop-color="#F60"></stop>
      <stop offset="95%" stop-color="#FF6"></stop>
    </lineargradient>
  </defs>

  <rect width="100" height="50"></rect>
</svg>

이렇게 하면 빨간색(#F60)에서 주황색(#FF6)까지 가로 그라데이션이 생성되고

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