English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG 필터 <filter> 요소는 SVG 이미지에 예쁜 효과를 추가하는 데 사용됩니다. 예를 들어, 그림자, 블러나 하이라이트.
이것은 간단한 SVG 필터 예제로, 두 개의 타원을 표시하고 있습니다. 왼쪽 타원은 필터를 사용하지 않았으며, 오른쪽 타원은 고스 블러 필터로 렌더링되었습니다：
<svg width="500" height="100"> <defs> <filter id="blurFilter" y="-5" height="40" <feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/> </filter> </defs> <ellipse cx="55" cy="60" rx="25" ry="15" style="stroke: none; fill: #0000ff; " /> <ellipse cx="155" cy="60" rx="25" ry="15" style="stroke:none; fill:#0000ff; filter:url(#blurFilter);" /> </svg>테스트를 해보세요‹/›
실행 후 이미지 효과:
오른쪽 원형의 모서리가 흐릿하게 되는 것을 주목해 주세요.
SVG 필터는 입력(원)이 필요하며, 이에 필터 효과를 적용합니다. 필터의 입력은 형상 그래픽(RGB 색상을 나타내는 것), 형상의 alpha 채널, 또는 다른 필터의 출력일 수 있습니다.
SVG 필터는 입력에서 그래픽 출력(결과)을 생성합니다. 이 출력은 일반적으로 필터가 적용된 형상보다 표시됩니다. 필터의 출력은 다른 필터의 입력으로 사용될 수 있으며, 따라서 필터를 연결할 수 있습니다.
SVG 필터 입력 및 출력의 그래픽을 보여줍니다:
| SVG 필터는 형상 그래픽, alpha 채널, 또는 다른 필터의 출력을 입력으로 사용할 수 있습니다. |
SVG 필터의 입력은 일반적으로 in 필터 요소의 속성에 지정됩니다. 이는 예제입니다:
<feGaussianBlur stdDeviation="3in="SourceGraphic" />
SVG 필터의 출력을 다른 필터의 입력으로 사용하려면 result 필터 요소에 속성을 추가해야 합니다. 이는 예제입니다:
<feGaussianBlur stdDeviation="3in="SourceGraphic" result="blur"/>
이제, 다른 SVG 필터는 in 속성에 blur 값을 넣어 이 필터의 출력을 사용할 수 있습니다. 위의 예제에서 blur 값은 필터의 result 속성에 지정되었습니다.
필터의 크기는 x, y, width, height 속성으로 설정됩니다.
x와 y 속성은 입력 형상의 x와 y에 비례하여 해석됩니다. 일부 필터의 출력이 일반적으로 입력보다 크기 때문에 (예: 형상 주위에 블러를 추가하는 경우), 필터가 추가된 그래픽을 잘라내지 않도록 x와 y에 음수를 사용하는 것이 일반적입니다.
width와 height 속성도 동일하게 간단합니다. 또한, 때로는 입력 형상보다 큰 너비와 높이를 지정해야 할 수 있습니다. 이는 필터가 추가된 효과를 잘라내지 않도록 합니다.
이를 사용할 수 있습니다
<svg width="500" height="100"> <defs> <filter id="blurFilter2" y="-10" height="40" x="-10" width="150"> <feOffset in="SourceAlpha" dx="3" dy="3" result="offset2" /> <feGaussianBlur in="offset2" stdDeviation="3" result="blur2"/> feMerge> <feMergeNode in="blur2" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> </defs> <ellipse cx="55" cy="60" rx="25" ry="15" style="stroke: none; fill: #0000ff; filter: url(#blurFilter2);" /> </svg>테스트를 해보세요‹/›
이 예제는 SVG 필터를 생성하며, 두 개의 필터 요소를 포함하고 있습니다: <feOffset>와 <feGaussianBlur>。이동 필터 효과 (feOffset)는 적용된 형상의 Alpha 채널에 영향을 미칩니다. 고스 블러 (feGaussianBlur)는 이동 필터 효과의 출력에 영향을 미칩니다.
고스 블러 SVG 필터는 SVG 형태를 흐리게 만dí. 고스 블러 필터는
<svg width="500" height="250"> <defs> <filter id="blurFilter4" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceGraphic" stdDeviation="10" /> </filter> </defs> <rect x="20" y="20" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter4);" /> </svg>테스트를 해보세요‹/›
이 예제는 <feGaussianblur>를 포함한 <filter>을 정의합니다. 그런 다음, 그 예제는 그래픽 필터를 참조하는 CSS filter 속성을 가진 녹색 사각형을 정의합니다. 다음은 생성된 이미지입니다：
<feGaussianBlur> 요소의 stdDeviation 속성은 필터를 적용할 형태를 흐리게 만드는 정도를 결정합니다. 숫자가 클수록 형태가 더 흐릅니다. 다음은 다른 stdDeumation 값을 가진 세 가지 예제입니다：
<svg width="500" height="250"> <defs> <filter id="blurFilter5" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceGraphic" stdDeviation="2" /> </filter> <filter id="blurFilter6" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceGraphic" stdDeviation="6" /> </filter> <filter id="blurFilter7" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceGraphic" stdDeviation="12" /> </filter> </defs> <rect x="20" y="24" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" /> <rect x="150" y="24" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);" /> <rect x="300" y="24" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);" /> </svg>테스트를 해보세요‹/›
실행 후 이미지 효과:
주의하세요, 사각형이 점점 흐리워지는 것을 볼 수 있습니다. 적용된 필터의 stdDeumation 속성의 값이 높을수록 더 흐릅니다.
<svg width="500" height="250"> <defs> <filter id="blurFilter8" x="-20" y="-20" width="200" height="200"> <feGaussianBlur in="SourceAlpha" stdDeviation="10" /> </filter> </defs> <rect x="20" y="20" width="90" height="90" style="stroke: none; fill: #00ff00; filter: url(#blurFilter8);" /> </svg>테스트를 해보세요‹/›
실행 후 이미지 효과:
주의하세요, 녹색으로 채워진 사각형이나 필터의 출력은 검은색과 흰색입니다. 고스 블러 필터가 알파 채널에 대신 그래픽(RGB) 채널에 적용되면 이 현상이 발생합니다.
이동 필터는 입력을 받아 출력에서 이동시킵니다. 다시 말해, 그림자를 상하좌우로 이동시킬 수 있습니다. 따라서, 그 작동 방식은 변환과 유사하지만 필터에서 완료됩니다. 다음은 예제입니다：
<svg width="500" height="250"> <defs> <filter id="offsetFilter1" x="-20" y="-20" width="200" height="200"> <feOffset in="SourceGraphic" dx="80" dy="20" /> </filter> </defs> <rect x="20" y="20" width="90" height="90" style="stroke: #000000; fill: none; filter: url(#offsetFilter1);" /> <rect x="20" y="20" width="90" height="90" style="stroke: #000000; fill: none; " /> </svg>테스트를 해보세요‹/›
이 예제에서는 완전히 같은 위치에 두 개의 사각형을 정의했습니다. 사각형 중 하나는 옆으로 필터를 적용하여 아래로와 오른쪽으로 이동합니다.
실행 후 이미지 효과.
옆으로 필터는 형태에도 다른 영향을 미칠 수 있습니다(종류의 불투명도), 하지만 왜 이렇게 되는지는 확실하지 않습니다. 이러한 현상에 대한 설명을 찾을 수 없습니다.
행렬 변환을 형태의 색상에 적용할 수 있는 색상 행렬 필터를 사용할 수 있습니다. 다음은 예제입니다:
<svg width="500" height="250"> <defs> <filter id="colorMatrixFilter1" x="-20" y="-20" width="200" height="200"> <feColorMatrix in="SourceGraphic" type="matrix" values="0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 "/> </filter> </defs> <rect x="20" y="20" width="90" height="90" style="stroke: none; fill: #0000ff; filter: url(#colorMatrixFilter1);" /> </svg>테스트를 해보세요‹/›
행렬의 값은 <feColorMatrix> 요소의 values 속성에서 제공됩니다. 총4 x 5=20개의 값이 있습니다. 이 값은 원래 형태의 색상에 적용됩니다. 다음과 같이 보입니다:
0 0 0 red 0 0 0 0 green 0 0 0 0 blue 0 0 0 0 1 0
실행 후 이미지 효과:
주의: Chrome와 Firefox에서의 색상 행렬 필터는 결과가 좀 이상한 경우가 있습니다. 위의 사각형은 채우기 색상으로 지정되었지만, 색상 행렬 필터가 작업을 완료하면 테두리만 남아 있습니다.
여러 필터의 입력을 하나로 합쳐서 사용할 수 있는 복합 필터를 사용할 수 있습니다. 이는 다음과 같은 예제입니다:
<svg width="500" height="250"> <defs> <filter id="blurFilter3" y="-10" height="40" x="-10" width="150"> <feOffset in="SourceAlpha" dx="3" dy="3" result="offset3" /> <feGaussianBlur in="offset3" stdDeviation="3" result="blur3"/> <feBlend in="SourceGraphic" in}}2="blur3" x="-10" width="160"/> </filter> </defs> <ellipse cx="55" cy="60" rx="25" ry="15" style="stroke: none; fill: #0000ff; filter: url(#blurFilter3);" /> </svg>테스트를 해보세요‹/›
이 예제에서는3종류의 필터 효과를 가진 필터입니다. 앞 두 가지는 연결된 이동량과 고스 블러 효과입니다. 세 번째는
이 텍스트의 앞부분에서 설명한 조합 필터로 얻은 효과와 매우 유사합니다.