SVG 선형 경사

<defs>와<filter>

모든 SVG 필터는 <defs> 요소에서 정의됩니다.<defs> 요소는 정의(definitions)의 약자로, 특수 요소(예: 필터)의 정의를 포함합니다.

<filter> 요소는 SVG 필터를 정의합니다.<filter> 요소는 필터를 식별하기 위해 필요한 id 속성을 가집니다. 그런 다음 그래픽이 사용할 필터를 가리킵니다.

SVG <feOffset>

예제 1

<feOffset> 요소는 그림자 효과를 만들기 위해 사용됩니다. 방법은 다음과 같습니다: 먼저 SVG 그래픽(이미지나 요소)을 가져옵니다. 그런 다음 xy 평면에서 약간 이동합니다.

첫 번째 예제는 사각형을 이동했습니다(사용 <feOffset>），그런 다음 원본 이미지를 이동된 이미지의 위로 복합합니다(사용 <feBlend>）：

이 SVG 코드는 다음과 같습니다:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

직접 시험해 보세요

코드 설명:

  • <filter> 요소의 id 속성이 필터의 유일한 이름을 정의합니다
  • <rect> 요소의 filter 속성이 이 요소를 "f1" 필터에 연결합니다

예제 2

이제, 이미지를 모호하게 이동할 수 있습니다(사용 <feGaussianBlur>）：

이 SVG 코드는 다음과 같습니다:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

직접 시험해 보세요

코드 설명:

  • <feGaussianBlur> 요소의 stdDeviation 속성이 모호성을 정의합니다

예제 3

그림자를 검은색으로 설정하면 다음과 같습니다:

이 SVG 코드는 다음과 같습니다:

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

직접 시험해 보세요

코드 설명:

  • <feOffset> 요소의 in 속성이 "SourceAlpha"로 변경되어 Alpha 채널 대신 전체 RGBA 픽셀을 사용하여 흐림을 생성합니다

예제 4

그림자를 한 색상으로 처리하면 다음과 같습니다:

이 SVG 코드는 다음과 같습니다:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

직접 시험해 보세요

코드 설명:

  • <feColorMatrix> 필터는 이동된 이미지의 색상을 더 가까운 검은색으로 변환하는 데 사용됩니다. 매트릭스의 세 개의 '0.2' 값은 빨강,绿色发展 및 레드 채널로 곱됩니다. 그들의 값을 줄이면 색상이 검은색에 가까워집니다(검은색은 0입니다).