[SVG] feTurbulence Filter

HYl·2022년 4월 15일
0
post-thumbnail

Structuring a Basic SVG

SVG는 본질적으로 2D 그래픽을 설명하기위한 XML 기반 마크업 언어입니다.
MDN의 정의는 "SVG는 HTML이 텍스트에 대한 그래픽에 필수적입니다"

다른 HTML 태그와 마찬가지로 width 및 height와 같은 속성을 <svg> 태그에 추가 할 수 있습니다.

<svg xmlns=”http://www.w3.org/2000/svg" viewBox=”0 0 100 100">
	<rect x=10" y=”10" width=80" height=”80" fill=”green” />
</svg>`
  • xmlms : SVG는 XML 기반이므로 SVG 요소로 요소를 식별하는 네임 스페이스를 선언해야합니다.
    • SVG가 HTML 안에있는 경우에는 속성이 필요하지 않습니다. 네임 스페이스는 이미 HTML 파서에 제공됩니다
  • rect : SVG 내에서 렌더링되는 모양입니다.
  • viewBox : viewbox 속성은 SVG의 크기와 위치를 정의합니다.
    • min-x and min-y : SVG의 범위 내에서 ViewBox를 이동하거나 삽입합니다.
    • width and height : ViewBox에서 이미지를 확대 / 축소합니다

Filter

사각형인 <RECT> 요소와 마찬가지로 SVG는 다른 많은 요소를 가지고 있습니다. 그 요소 중 하나는 <filter> 입니다.

Filter는 Filter Primitive Elements 그룹을 랩핑하는 SVG 요소입니다. Filter Primitive는 이미지에 혼합하여 추가 할 수있는 색상입니다.

<svg width="600" height="450" viewBox="0 0 600 450">
  <filter id="myFilter">
  <feGaussianBlur stDeviation="5"></feGaussianBlur>
  </filter>
  <image xlink:href="" width="100%" height="100%" x="0" y="0" filter="url(#myFilter)"></image>
</svg>

이미지가 포함 된 기본 SVG 요소와 filter 요소가 포함되어 있습니다. filter 요소는 'fegaussianblur'라는 Filter Primitiv를 자식 요소로 가지고 있습니다. fegaussianblur는 SVG 요소 내에 맵핑 된 요소에 gaussian blur을 생성합니다.

위의 svg안의 image 태그 안에는 여러 개의 속성이 있습니다.

  • xlink:href : 이미지 파일 경로 지정 (ex. /myImage.png)
  • x and y : 이미지를 원점에서 x-가로 및 y-수직으로 위치시킵니다.
  • Filter : filter ID를 기반으로 이미지에서 원하는 filter 효과를 지정합니다.

feTurbulence filter mapped to an image

feTurbulence

feTurbulence 필터는 요소가 맵핑 된 것에 대해 흐린 효과를냅니다.

  • filter와 이미지 요소가 포함 된 SVG 요소가 있습니다.
  • 이미지 요소는 SVG 네임 스페이스에 배치되지 않는 요소를 표시하는 데 사용되는 foiegnobject 태그 내에 래핑됩니다.
  • FedisPlacementMap는 두 개의 입력 (이는 filter이미지가되는)을 취하고 두 개의 입력을 출력합니다.
    filterin2 속성 내에서 참조되고 이미지는은 in 출력에서 참조됩니다.
  • feTurbulence 요소 내에서는 애니메이션 요소를 추가했습니다. filter에 더 많은 노이즈를 추가하는 속성은 "BaseFrequency" 입니다.

My Demo

<svg viewbOX="0 0 100 100">
  <filter id="filter1">
    <feTurbulence type="turbulence" baseFrequency="0.07 0.05" numOctaves="5" stitchTiles="stich" x="0%" y="0%" width="100%" height="100%" result="noise" />
    <feDisplacementMap in="SourceGraphic" in2="noise" scale="10" xChannelSelector="R" yChannelSelector="B" x="0%" y="0%" width="100%" height="100%" />
  </filter>
  <image xlink:href="https://picsum.photos/300/300" x="0%" y="0%" width="50%" height="100%" filter="url(#filter1)"></image>
</svg>

REFERENCE

profile
꾸준히 새로운 것을 알아가는 것을 좋아합니다.

0개의 댓글