SVG
그라디언트

Android Angular 2 AngularJS CSS HTML Java Language JavaScript jQuery PHP Python Language
수색…


매개 변수

공유지 정의
gradientUnits 그라데이션 속성의 좌표계 objectBoundingBox 또는 userSpaceOnUse
그라디언트 변환 그라데이션의 내용에 적용하는 변환
spreadMethod 그라데이션 바깥 쪽에서 어떤 일이 발생하는지 정의합니다. 패드, 반영 또는 반복
xlink : href 속성이나 내용을 제공하는 다른 그라디언트에 링크
------ ------
선형 그라디언트 정의
------ ------
x1 그래디언트 벡터를 정의한다.
x2 x1 참조
y1 x1 참조
y2 x1 참조
------ ------
방사형 그라디언트 정의
------ ------
CX 외부 구배 중심의 x 좌표
싸이 외부 구배 중심의 y 좌표
아르 자형 그라디언트의 바깥 쪽 반지름 100 % 정류장 위치
FX 내부 구배 중심의 x 좌표 0 % 정류장의 위치
fy 내부 그라디언트 중심의 y 위치 0 % 정류장의 위치

비고

SVG는 대소 문자를 구별하므로 중간에 대문자 G를 사용하십시오.

선형 그라디언트

<svg>
  <defs>
        <linearGradient id='g' y1="100%" x2="100%">
            <stop offset='0%' stop-color='yellow' />
            <stop offset='100%' stop-color='green' />
        </linearGradient>
    </defs>
    <rect width='100%' height='100%' fill='url(#g)'/>
</svg>

방사형 그레디언트

<svg>
  <defs>
    <radialGradient id="g">
      <stop offset="10%" stop-color="green" />
      <stop offset="90%" stop-color="white" />
    </radialGradient>
  </defs>

  <rect width='100%' height='100%' fill='url(#g)'/>
</svg>


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow