최신 웹 개발 튜토리얼
 

SVG흐림 효과


<응급 바이러스 정의>와 <필터>

모든 인터넷 SVG 필터는 내 정의 된 <defs> 요소입니다. <defs> 요소는 정의에 대한 짧고 특별한 요소의 정의를 포함 (such as filters) .

<filter> 요소는 SVG 필터를 정의하는 데 사용됩니다. <filter> 요소는 필터를 식별하는 필수 id 속성이 있습니다. 그래픽은 사용하는 필터를 가리 킵니다.


SVG <feGaussianBlur>

예 1

<feGaussianBlur> 요소는 흐림 효과를 만드는 데 사용됩니다 :

fegaussianblur

다음은 SVG 코드는 다음과 같습니다

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>
»그것을 자신을 시도

Code explanation:

  • id 의 속성 <filter> 요소는 필터의 고유 한 이름을 정의합니다
  • 흐림 효과는 정의되어 <feGaussianBlur> 요소
  • in="SourceGraphic" 부분은 효과가 전체 요소에 대해 만들어집니다 정의
  • stdDeviation 속성은 흐림의 양을 정의
  • filter 의 속성 <rect> 요소는에 요소를 연결 "f1" 필터