CSS를 사용하여 SVG 직사각형에 선형 그래디언트를 어떻게 적용합니까?

CSS를 사용하여 SVG 직사각형에 선형 그라디언트를 적용하는 방법

SVG 요소에 그라디언트를 적용하는 것은 웹 개발의 일반적인 작업입니다. 이 기사에서는 CSS를 사용하여 SVG 직사각형에 선형 그래디언트를 적용하는 방법을 살펴보겠습니다.

그라디언트 구문 이해

CSS에서 선형 그래디언트는 배경 이미지를 사용하여 정의됩니다. 재산. 구문은 다음과 같습니다.

<code class="css">linear-gradient(direction, color-stop1%, color-stop2%, ..., color-stopN%);</code>

• direction: 그라데이션이 흐르는 방향을 지정합니다. 일반적인 값에는 위쪽, 아래쪽, 왼쪽 및 오른쪽이 포함됩니다.
• color-stop: 특정 색상이 정의된 그라데이션 선의 점을 나타냅니다. 0%에서 100% 사이의 백분율 값으로 표시됩니다. 각각 다른 색상과 위치를 갖는 여러 색상 정지점을 정의할 수 있습니다.

그라디언트 적용

Gradient를 SVG 직사각형에 적용하려면 채우기 속성을 사용할 수 있습니다. 채우기 값으로 선형 그라데이션() 값을 제공하기만 하면 됩니다. 예:

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: linear-gradient(to right, #F60 5%, #FF6 95%);
}</code>

SVG에서 그라데이션 정의

SVG 문서 자체에서 요소. 이 요소는 일반적으로 부분. 예:

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

위 예에서 그라데이션은 두 가지 색상 정지점으로 정의됩니다. 하나는 5% 색상 #F60이고 다른 하나는 95% 색상 #FF6입니다. id 속성은 그라데이션에 대한 고유 식별자를 제공하며, 이를 통해 CSS에서 이를 참조할 수 있습니다.

CSS에서 그라데이션 참조

CSS에서 다음을 사용하여 정의된 그라데이션을 참조할 수 있습니다. url() 함수:

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

이것은 요소를 SVG 직사각형에 적용합니다.

전체 예

다음은 SVG 직사각형에 선형 그래디언트를 적용하는 방법에 대한 전체 예입니다.

<code class="svg"><svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="MyGradient">
            <stop offset="5%" stop-color="#F60" />
            <stop offset="95%" stop-color="#FF6" />
        </linearGradient>
    </defs>

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

<code class="css">rect {
    cursor: pointer;
    shape-rendering: crispEdges;
}</code>

적용 CSS를 사용하여 SVG 직사각형에 선형 그래디언트를 적용하는 것은 디자인의 시각적 매력을 향상시킬 수 있는 강력한 기술입니다. 채우기 속성과 선형 그라데이션() 값을 활용하면 다양한 색상, 방향, 불투명도를 갖는 그라데이션을 만들 수 있습니다.

위 내용은 CSS를 사용하여 SVG 직사각형에 선형 그래디언트를 어떻게 적용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!