svg <linearGradient>, <radialGradient>, <stop>, <g>

svg 태그에 대해 알아보면서 추가적으로 <linearGradient>, <stop>, <g> 태그에 대해 알아보았다.

<stop>

<stop>요소는 그라데이션에 사용할 색상과 위치를 정의할 수 있다.

• offset : 그라데이션 스톱이 그라데이션 벡터를 따라 어디에 배치되는지를 정의
• stop-color : 그라데이션 스톱의 색상을 정의
• stop-opacity : ****그라데이션 스톱의 투명도를 정의

 

<linearGradient>

<linearGradient> 태그를 사용하면 다른 SVG 요소에 선형 그라데이션을 적용할 수 있다.

• x1 : 기준 축의 시작 점 x좌표
• y1 : 기준 축의 시작 점 y좌표
• x2 : 기준 축의 끝 점 x좌표
• y2 : 기준 축의 끝 점 y좌표
• gradientTransform (그라데이션 변환) : 그라데이션 좌표 시스템에 대한 추가적인 변환
• 단위 : %

See the Pen svg linearGradient by pminsun (@pminsun) on CodePen.

 

 

<radialGradient>

<radialGradient>요소를 통해 작성자는 그래픽 요소의 채우기 또는 획에 적용할 수 있는 방사형 그라데이션을 정의할 수 있다.

• cx (끝 원의 x 좌표) : radialGradient의 끝 원의 x 좌표를 정의
• cy (끝 원의 y 좌표) : radialGradient의 끝 원의 y 좌표를 정의
• fr (시작 원의 반지름) : radialGradient의 시작 원의 반지름을 정의
• fx (시작 원의 x 좌표) : radialGradient의 시작 원의 x 좌표를 정의
• fy (시작 원의 y 좌표) : radialGradient의 시작 원의 y 좌표를 정의
• gradientTransform : 그라데이션 좌표 시스템에 대한 추가적인 변환을 제공
• r (끝 원의 반지름) ****: ****radialGradient의 끝 원의 반지름을 정의

See the Pen svg radialGradient by pminsun (@pminsun) on CodePen.

 

<g>

다른 svg 요소를 그룹화 하는 데 사용되는 컨테이너이다.

<use> 요소와 함께 나중에 참조될 여러 요소들을 그룹화 할 수 있다.

See the Pen svg g by pminsun (@pminsun) on CodePen.

 

 

참고

<linearGradient> - SVG: Scalable Vector Graphics | MDN

 

<radialGradient> - SVG: Scalable Vector Graphics | MDN

 

<stop> - SVG: Scalable Vector Graphics | MDN

 

<g> - SVG: Scalable Vector Graphics | MDN

 

[SVG] gradiant