image

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

태그
Html
상세설명svg <linearGradient>, <radialGradient>, <stop>, <g> 탐구
작성일자2024.01.24

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

<stop>

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

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

    • <linearGradient>

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

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

    • <radialGradient>

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

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

    • <g>

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

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

    참고

    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient

    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/radialGradient

    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop

    https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g

    https://velog.io/@mangojang/SVG-gradiant

    이전 포스트

    svg <defs>, <use>

    다음 포스트

    scroll guide