SVG 변화

SVG 점진적 변화는 하나의 색상에서 다른 색상으로의 원활한 전환을 정의할 수 있습니다. SVG에서는 두 가지 유형의 점진적 변화가 있습니다: 선형 점진적 변화와 원형 점진적 변화

SVG 점진적 변화는 형상을 불균형적으로 색상으로 채우는 방법입니다. 이렇게 하면 형상의 채우기나 선 효과는 하나의 색상에서 다른 색상으로 변할 수 있습니다. 일부 유형의 그래픽에서는 매우 좋게 보입니다.

점진적 변화 예제

이는 점진적 변화를 형상 채우기와 선 효과에 적용하는 모습입니다:

첫 번째 사각형은 항상 같은 선 효과 색상을 가지고 있지만, 점진적 채우기 색상(미색에서 깊은 녹색으로)을 가집니다.
　 　두 번째 사각형은 선 효과와 채우기에 모두 점진적 변화를 적용했습니다.
　 　세 번째 사각형은 선 효과에 점진적 변화를 적용했지만, 채우기에는 없습니다.
　 　네 번째 사각형은 기하선을 채우기 위해 점진적 변화를 적용했지만, 선 효과는 없습니다.

연속 변화는 두 가지 유형이 있습니다：

1. 선형 연속 변화

2. 방사형 변화

다음 섹션에서는 이 두 가지 측면을 소개할 것입니다.

선형 연속 변화

선형 연속 변화는 하나의 색상에서 다른 색상으로 선형적으로 일관되게 변화합니다. 본문의 시작 부분에서 이미 간단한 선형 연속 변화 예제를 본 것입니다.

색상은 수직, 수평 또는 정의한 벡터에 따라 변할 수 있습니다. 또한, 전체 형태 대신 형태의 일부만 연속 변화로 채울 수도 있습니다. 설명을 계속하기 전에, 여기에 몇 가지 시각적 예제가 있습니다：

첫 번째 사각형은 수직 연속 변화를 사용합니다. 두 번째 사각형은 수평 연속 변화를 사용합니다. 세 번째 사각형은 오른쪽 아래로 가는 대각 연속 변화를 사용합니다. 네 번째 사각형은 사각형의 오른쪽 반쪽만 연속 변화로 채우습니다. SVG의 선형 연속 변화를 사용하면 모두 가능합니다.

선형 연속 변화는 다음과 같이 사용됩니다.<linearGradient>요소가 정의된. 이는 예시입니다:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect　x="10"　y="10"　width="75"　height="100"　rx="10"　ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke:　#005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

와 같이 보입니다.<linearGradient>-element가<defs>-element 내에 정의되어야 합니다.<defs>-element 내에, 이후 SVG 이미지에서 참조할 수 있습니다. 이 예제에서 선형 연속 변화는 CSS 속성（(fill:url(#myLinearGradient1))）에 <rect>의style속성 내에-element 참조.

본<linearGradient>-element가 두 개의 내장<stop>-elements는<linearGradient>-elements의spreadMethodelement는 기울기가 적용되기 전과 기울기가 적용된 후에 어떤 속성을 제어하는지 정의합니다. (발생 방향과<stop>-속성）。이

이는<linearGradient>-elements는 연속 변화에서 사용할 색상, 얼마나 멀리서 형태 색상이 시작되고 정지되는지, 그리고 연속 변화의 불투명도를 제어합니다.

이는<stop>연속 변화를 적용하기 전에 변환할 수 있습니다. (예를 들어, 회전). 자세한 내용은

이러한 모든 속성 설명을 기억하는 것은 어렵습니다. 이를 설명하기 위해 이미지를 만들었습니다:

이미지와 일치하는 선형 연속 변화 정의는 다음과 같습니다：

　　　　<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　　　x2="100%"　y2="0%"
　　　　　　　　　　　　　　　　　　　　　　spreadMethod="pad">
　　　　　　　　<stop　offset="10%"　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　　　<stop　offset="30%"　stop-color="#006600"　stop-opacity="1"/>
　　　　　　　　<stop　offset="70%"　stop-color="#cc0000"　stop-opacity="1"/>
　　　　　　　　<stop　offset="90%"　stop-color="#000099color="#0000-opacity="1"/>
　　　　　　</linearGradient>
　　　　</defs>
　　　　<rect　x="10"　y="10"　width="5"　stop50"　rx="10"　ry="10"
　　　　　　　style="fill:url(#myLinearGradient1);　stroke:　#005000;
　　　　　　　　　　　　　　stroke-width:　3;"　/>
　　　　</svg>

00"　height="10％에서 사각형에 진입합니다. 첫 번째 정지 색상이 #00cc00인 경우spreadMethod이 "pad"으로 설정되었으며, 첫 번째 색상도 사각형에 채워집니다이전의 첫 번째 정지 색상（0-10％).

첫 번째 정지 색상에서10％에서 두 번째 정지 색상 #006600，사각형의30％.

두 번째 종료 색상에서30％에서 세 번째 종료 색상 #cc0000（빨간색），사각형의70％.

세 번째 정지 색상에서70％에서 네 번째와 마지막 정지 색상 #000099（파란색），90％에서90％에서 사각형의 나머지 부분까지, 마지막 종료 색상(#000099）는 사각형에 채워집니다. 왜냐하면spreadMethod 　 　이<linearGradient>요소의 속성이 "pad"으로 설정되었습니다.

방사형 변화

방사형 변화는 색상이 원형 방식으로 대신 선형 방식으로 변화하는 변화입니다. 이는 예시 이미지입니다:

맞게 보이는 것처럼, 색상은 원형 방식으로 변화합니다. 마지막 세 개의(녹색) 사각형은 가장 약한 녹색의 방사 중심에서만 변화합니다. 첫 번째 녹색 사각형은 사각형의 중심에서부터 색상이 퍼져 나가 있습니다. 두 번째 사각형은 사각형의 상단 중앙을 사용합니다. 세 번째 사각형은 왼쪽 상단으로 중심을 두고 있습니다.

방사형 변화는 사용됩니다<radialGradient>요소가 정의된. 이는 예시입니다:

<svg　width="512"　height="120">
<defs>
<radialgradient　id="myRadialGradient4"　fx="5%"　fy="5%"　r="65%"　spreadmethod="pad"><stop　offset="0%"　stop-color="#00ee00"　stop-opacity="1></stop>
<stop　offset="100%"　stop-color="#006600"　stop-opacity="1></stop></radialgradient></defs>
<rect　x="340"　y="10"　width="100"　height="100"　rx="10"　ry="10"　style="fill:url(#myRadialGradient4);　stroke:　#005000;　stroke-width:　3;">/rect>
　　　</svg>

이 SVG 코드는 위 예시에서 표시된 네 번째 사각형을 정의합니다. 어떻게<stop>선형 변화와 마찬가지로 요소를 사용하여 색상을 정의합니다(설명에 대한 설명은 선형 변화를 참조하세요).

이는<radialGradient> 　 　요소의 속성 목록:

반지름 그래디언트의 중심은 원형 색상 확산의 중심입니다. 반지름 그래디언트를 원으로 설명할 때, cx와 cy는 원의 중심을 나타냅니다.

반지름 그래디언트의 초점은 색상 방사의 "각도"입니다. 반지름 그래디언트를 조명으로 볼 때, 초점은 조명에서 형상과 충돌하는 각도를 결정합니다.50％，50％는 바로 위에서 나타냅니다.5％，5％는 왼쪽 상단에서 아래로 나타냅니다. 그래디언트는 빛이 형상에照到하는 것처럼 보입니다.

그래디언트의 중심과 초점을 설정하기 전에, 그래디언트를 시도해보는 것이 좋습니다. 이렇게 하면 이 간단한 예제를 만들기 위해 저는 이렇게 했습니다.

그래디언트 변환

규격 변환을 사용하여 그래디언트를 변환할 수 있습니다.SVG 변환기능을 사용하여 변환할 수 있습니다.gradientTransform속성, 그리고 그래디언트를 변환하는<linearGradient>와 　 　 <radialGradient>。이는 예제입니다：

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<defs>
　　　　<linearGradient　id="myLinearGradient1"
　　　　　　　　　　　　　　　　　　　　x1="0%"　y1="0%"
　　　　　　　　　　　　　　　　　　　　x2="0%"　y2="100%"
　　　　　　　　　　　　　　　　　　　　spreadMethod="pad"gradientTransform="rotate(45)"
　　　　>
　　　　　　<stop　offset="0%"　　　stop-color="#00cc00"　stop-opacity="1"/>
　　　　　　<stop　offset="100%"　stop-color="#006600"　stop-opacity="1"/>
　　　　</linearGradient>
　　</defs>
　　<rect　x="10"　y="10"　width="75"　height="100"　rx="10"　ry="10"
　　　　　style="fill:url(#myLinearGradient1);
　　　　　　　　　　　　stroke:　#005000;
　　　　　　　　　　　　stroke-width:　3;"　/></svg>

이 예제는 변화를 회전시키기 위해gradientTransform() 　속성의 선형 변화, 이 변화는 변화를 회전시킵니다45각도. 일반적으로, 변화는 상단에서 하단으로 단계적으로 색상을 변환하지만, 지금은 회전을 통해 상단 오른쪽에서 하단 왼쪽으로 변환됩니다.

실행 후 이미지 효과: