CSS를 사용하여 SVG Rect 요소에 선형 그라디언트를 적용하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

Patricia Arquette

풀어 주다： 2024-10-30 17:13:02

원래의

657명이 탐색했습니다.

How to Apply Linear Gradients to SVG Rect Elements Using CSS?

CSS를 사용하여 SVG Rect 요소에 선형 그래디언트 적용

시각적 향상을 추구하는 개발자는 종종 SVG Rect에 선형 그래디언트를 적용하려고 합니다. 강요. 이 질문은 그러한 그라디언트를 얻기 위해 CSS를 활용하는 기술에 대해 자세히 설명합니다.

CSS 접근 방식

CSS를 통해 SVG 직사각형 요소에 선형 그라디언트를 적용하려면 채우기를 활용하세요. 다른 요소의 채우기 속성과 마찬가지로 속성을 사용합니다. SVG 자체 내에서 선형 그라데이션을 정의하는 것이 중요합니다.

다음 예를 고려하세요.

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}</code>

로그인 후 복사

<code class="html"><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 offset="95%" stop-color="#FF6" />
        </linearGradient>
      </defs>
      
      <rect width="100" height="50"/>
    </svg></code>

로그인 후 복사

이 코드는 요소를 선택하고 이를 요소의 채우기 값으로 할당합니다. 요소. 결과적으로 직사각형에는 #F60에서 #FF6까지의 그라데이션 색상이 표시됩니다.

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