수색…
통사론
- 필터 선언 :
<filter id="filter-id"> ... 하위 프리미티브 목록 ...</filter> - SVG 속성을 통해 필터 적용 :
<elementname filter="url(#filter-id)" ... /> - CSS 속성을 통해 필터 적용 : (-prefix- ) filter : url ( "# filter-id");
매개 변수
| 요소 속성 | 세부 |
|---|---|
| 필터 영역 | 필터 요소는 필터 효과의 출력에 대한 위치, 치수, 해상도 및 단위를 선택적으로 정의 할 수 있습니다. 필터의 위치와 크기는 x, y, width, height 매개 변수를 사용하여 지정할 수 있습니다. 기본값은 직관적이지 않으며 다음 과 같습니다. x : -10 % y : -10 % width : 120 % height : 120 % |
| 필터 해상도 | filterRes 속성은 필터가 처리되는 해상도를 지정하는 데 사용할 수있는 SVG 1.1의 선택적 속성입니다. 이 속성은 고르지 않은 지원을했으며 현재 브라우저에서는 더 이상 사용되지 않습니다. |
| 필터 유닛 | 기본적으로 필터 요소의 필터 효과 영역 (x, y, 폭, 높이)에 대한 단위와 좌표 시스템은 필터를 참조하는 요소의 경계 상자를 기준으로 설정됩니다. SVG 용어에서이를 "objectBoundingBox"라고합니다. x = "50 %"라고 쓰면 "참조하는 요소의 테두리 상자의 왼쪽에있는 필터 영역의 시작 x 위치 + 요소의 너비의 50 %"를 의미합니다. 그러나 filterUnits 속성을 설정하여 명시 적으로 단위와 좌표를 지정할 수도 있습니다. 두 가지 대안은 "objectBoundingBox"(방금 설명한 기본값) 또는 "userSpaceOnUse"입니다. userSpaceOnUse는 필터 요소와 좌표계를 참조 요소의 캔버스 또는 SVG 용어로 "userSpaceOnUse"로 설정합니다. |
| 기본 단위 | 필터 자체의 단위 시스템 외에도 primitiveUnits 속성을 통해 필터의 하위 필터 기본 요소가 사용할 단위 시스템을 지정할 수도 있습니다. 다시 한번, userSpaceOnUse와 objectBoundingBox 사이의 선택입니다. 이것들은 filterUnits와 같은 방식으로 필터 기본 요소에 대한 0,0 좌표와 단위 값에 영향을줍니다. |
| 색 공간 | SVG 필터의 기본 색상 공간은 linearRGB입니다. 선택적 color-interpolation-filters 속성을 sRGB 로 설정하여 색상 공간을보다 일반적인 sRGB 공간으로 변경할 수 있습니다. |
비고
대부분의 필터 속성은 <animate> 요소를 통해 <animate> 할 수 있지만 IE에서 "fakeSMIL"라이브러리를 사용해야 동일한 결과를 얻을 수 있습니다. SMIL 애니메이션 ( <animate> 요소)은 새로운 Web Animations 스펙에 찬성하여 더 이상 사용되지 않을 예정입니다.
필터 요소의 하위 요소 - 필터 기본 요소 -에는 색상 보간 계산이 수행되는 색상 공간을 지정하는 두 가지 선택적 속성 인 색상 보간 및 색상 보 간 필터가 있습니다. 전자에 대한 기본값은 sRGB이고, 후자에 대한 기본값은 linearRGB입니다. 색상 공간을 반전시키는 조작 (feColorMatrix 또는 feComponentTransfer를 통해)은 직관적이지 않은 결과를 가져올 수 있습니다 (CSS sRGB 색상 공간에 사용 된 결과). 예를 들어, linearRGB의 회색 음영 이미지의 색상 반전은 흰색 톤으로 눈에 띄는 변화를 가져옵니다. 이는 프리미티브의 값을 sRGB로 설정하여 해결할 수 있습니다. 이러한 속성은 개별 필터 기본 요소에 설정되거나 필터 요소 자체에서 상속 될 수 있습니다.
다른 입력이 지정되지 않았지만 하나가 필요한 경우 필터의 첫 번째 필터 기본 요소는 참조 요소의 래스터 화 된 (비트 맵핑 된) 버전을 입력으로 사용합니다. 입력을 기대하는 후속 필터 기본 요소는 바로 앞의 필터 기본의 결과를 입력으로 사용합니다.
복잡한 필터에서는 암시적인 경우 입력 및 출력을 추적 (및 디버그)하는 것이 어려워 질 수 있습니다. 각 프리미티브에 대한 입력 및 출력을 명시 적으로 선언하는 것이 좋습니다.
SVG 필터 프리미티브는 구어체로 입력, 변환, 조명 효과 및 조합으로 나눌 수 있습니다.
투입물 :
feFlood : 색상 필드를 생성합니다.
feTurbulence : 다양한 노이즈 효과 생성
feImage : 외부 이미지 참조, 데이터 URI 또는 객체 참조에서 이미지를 생성합니다 (객체 참조는 12 월 중순 12 일의 Firefox에서 지원되지 않습니다)
변환 :
feColorMatrix : RBGA 픽셀의 입력 값을 출력 값으로 변환합니다.
feComponentTransfer : 개별 색상 채널의 색상 곡선을 조정합니다.
feConvolveMatrix : 각 픽셀을 현재 픽셀을 기준으로 한 영역의 픽셀 값에서 계산 된 새 픽셀로 바꿉니다.
feGaussianBlur : 현재 픽셀을 픽셀 주변의 픽셀의 가중 평균으로 바꿉니다.
feDisplacementMap : 다른 입력 그래픽의 R, G 또는 B 값을 기반으로 현재 위치에서 각 픽셀을 이동합니다.
feMorphology : 각 픽셀을 해당 픽셀 주위의 직사각형 영역에있는 모든 픽셀의 최대 값 또는 최소값에서 계산 된 새 픽셀로 바꿉니다.
feOffset : 현재 위치에서 입력을 이동합니다.
조명 효과 :
feSpecularLighting : "빛나는"2D 또는 의사 3D 조명 효과 제공
feDiffuseLighting : "매트"2D 또는 의사 3D 조명 효과를 제공합니다.
feDistantLight : 반사 또는 확산 조명에 먼 광원 제공
feSpotLight : 반사 또는 확산 조명을위한 원뿔형 단면 광원을 제공합니다.
fePointLight : 반사 또는 확산 조명을위한 점 광원을 제공합니다.
조합 :
feMerge : 여러 입력 (이전 필터 입력 포함)에서 단순 오버 합성을 생성합니다.
feBlend : 혼합 규칙을 사용하여 여러 입력을 혼합합니다.
feComposite : 알파 값을 고려하여 설정된 조합 규칙을 사용하여 여러 입력을 결합합니다.
feTile : 입력을 반복하여 반복 패턴을 만듭니다.
기타주의 사항
SVG는 벡터 그래픽 기술이지만 SVG 필터는 모든 입력 (SVG 도형 포함)에 대해 픽셀 수준의 연산을 수행하고 지정된 해상도에서 래스터 화 된 (비트 맵핑 된) 출력을 생성한다는 점을 강조하는 것이 중요합니다. 일반적인 화면 해상도에서 필터링 된 일반 SVG 곡선에 10 배 스케일 변환을 적용하면 원본 그래픽의 앤티 앨리어싱이 픽셀에 의해 픽셀로 변환되고 크기가 조정되므로 픽셀 화 된 가장자리가 생성됩니다. (이것이 사양을 준수하고 있는지 또는 현재의 구현에 한계가 있는지는 분명하지 않다.)
SVG는 필터 작성시 XML이므로 모든 태그를 닫아야하고 많은 특성 및 속성을 명시 적으로 지정해야하거나 필터가 실행되지 않습니다.
필터 요소는 절대로 직접 렌더링되지 않습니다. 이 필터는 필터가 적용된 요소의 filter 속성을 사용하여 참조됩니다. display 속성은 filter 요소에 적용되지 않으며 display 속성이 "none"이 아닌 값으로 설정된 경우에도 요소가 직접 렌더링되지 않습니다. 반대로 필터 요소 또는 해당 조상의 표시 속성이 "none"으로 설정된 경우에도 참조 용으로 필터 요소를 사용할 수 있습니다.
SVG 필터는 CSS 필터를 통해 참조 할 수 있지만 2016 년 중반부터는이 메커니즘을 통해 프리미티브의 하위 집합 만 지원되며 Microsoft 브라우저에서는이 메커니즘이 지원되지 않습니다.
흐림 필터 : feGaussian 흐림 효과 (기본)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="basicGaussian">
<feGaussianBlur stdDeviation="5"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#basicGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
흐림 필터 : feGaussianBlur (x 축 및 y 축 흐림 효과를 별도로 설정)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="xAxisGaussian">
<feGaussianBlur stdDeviation="5 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#xAxisGaussian)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
흐림 필터 : 하드 가장자리 및 100 % 불투명도의 feGaussianBlur
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" x="0%" y="0%" width="100%" height="100%">
<feGaussianBlur stdDeviation="5"/>
<feComponentTransfer>
<feFuncA type="table" tableValues="1 1"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
흐림 필터 : 상자 흐림 효과
<svg width="900px" height="400px" viewBox="900 400">
<defs>
<filter id="GaussianHardEdge" >
<feConvolveMatrix order="3" kernelMatrix=" 1 1 1
1 1 1
1 1 1"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#GaussianHardEdge)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
흐림 필터 : Bokeh Blur (3 레이어, 잘림)
<svg width="900px" height="400px" viewBox="0 0 900 400">
<defs>
<filter id="BokehBlur" color-interpolation-filters="sRGB">
<feGaussianBlur stdDeviation="2" result="blurSource"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer result="brightness-mask" >
<feFuncA type="discrete" tableValues="0 0 0 1 1"/>
</feComponentTransfer>
<!--bokeh Layer 1 -->
<feTurbulence type="fractalNoise" seed="1" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="5"/>
<feGaussianBlur stdDeviation="8"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 9 0" />
<feComponentTransfer result="bokeh1">
<feFuncA type="linear" slope=".5" />
</feComponentTransfer>
<!--bokeh Layer 2 -->
<feTurbulence type="fractalNoise" seed="49" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="12"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh2">
<feFuncA type="linear" slope=".3" />
</feComponentTransfer>
<!--bokeh Layer 3 -->
<feTurbulence type="fractalNoise" seed="44" baseFrequency=".67" numOctaves="3"/>
<feColorMatrix type="luminanceToAlpha"/>
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="brightness-mask"/>
<feComposite operator="in" in="blurSource"/>
<feMorphology operator="dilate" radius="10"/>
<feGaussianBlur stdDeviation="18"/>
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0
0 0 0 15 0" />
<feComponentTransfer result="bokeh3">
<feFuncA type="linear" slope=".2" />
</feComponentTransfer>
<!--Merge -->
<feBlend mode="multiply" in="bokeh3" in2="bokeh2"/>
<feBlend mode="lighten" in2="bokeh1"/>
<feMorphology operator="erode" radius="0" result="bokeh"/>
<feGaussianBlur stdDeviation="9" in="SourceGraphic"/>
<feComposite operator="over" in="bokeh"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#BokehBlur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
그림자 필터 : 기본 그림자
<svg width="800px" height="600px">
<defs>
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="red"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#drop-shadow)" x="30" y="100" font-size="80">SVG Filters</text>
</svg>
그림자 필터 : 내부 광선
<svg width="800px" height="600px">
<defs>
<filter id="inner-glow">
<feFlood flood-color="red"/>
<feComposite in2="SourceAlpha" operator="out"/>
<feGaussianBlur stdDeviation="2" result="blur"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<text filter="url(#inner-glow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
그림자 필터 : 복잡한 그림자 (Contoured, Noisy, Shaped)
<svg width="800px" height="600px">
<defs>
<filter id="complex-shadow" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
<!-- Take source alpha, offset it by angle/distance and blur it by size -->
<feOffset id="offset" in="SourceAlpha" dx="11" dy="6" result="SA-offset"/>
<feGaussianBlur id="blur" in="SA-offset" stdDeviation="4" result="SA-o-blur"/>
<!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->
<feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
<feFuncA id="contour" type="table" tableValues="0 1 .3 .1 0.05 .1 .3 1 "/>
</feComponentTransfer>
<feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>
<!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
<feFuncA id="spread-ctrl" type="linear" slope="2.8"/>
</feComponentTransfer>
<!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
<feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0.945 0 0 0 0 0.137 0 0 0 0 0.137 0 0 0 0.49 0" result="SA-o-b-c-s-recolor"/>
<!-- Generate a grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
<feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/>
<feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/>
<feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0.67" k2="0.33" result="SA-o-b-c-s-r-mix"/>
<!-- Merge the shadow with the original -->
<feMerge>
<feMergeNode in="SA-o-b-c-s-r-mix"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<text filter="url(#complex-shadow)" x="30" y="100" font-size="80" font-family="Sans-Serif" font-weight="bold">SVG Filters</text>
</svg>
색상 조작 필터 : 기본 회색조
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0.2126 0.7152 0.0722 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image
xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
색상 조작 필터 : 회색조 (녹색 채널 전용)
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
색상 조작 필터 : 모노톤
<svg width="800px" height="600px">
<defs>
<filter id="greyscale">
<feColorMatrix type="matrix"
values=".2 .2 .2 0 0
.6 .6 .6 0 0
.2 .2 .2 0 0
0 0 0 1 0"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#greyscale)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
흐림 필터 : 초점 흐리게 (가우시안)
<svg width="800px" height="600px">
<defs>
<filter id="focus-blur" >
<feDiffuseLighting result = "diffOut" diffuseConstant = "1" lighting-color="white">
<feSpotLight id="spotlight" x = "500" y = "100" z = "150" pointsAtX = "500" pointsAtY = "100" pointsAtZ = "0" specularExponent ="12" limitingConeAngle="70"/>
</feDiffuseLighting>
<feColorMatrix in="diffOut" result="alphaMap" type="luminanceToAlpha"/>
<feComponentTransfer in="alphaMap" result="invertlight">
<feFuncA type="table" tableValues="1 0 0"/>
</feComponentTransfer>
<feGaussianBlur in="invertlight" result="featherspot" stdDeviation="5"/>
<feComposite operator="xor" result="infocus" in2="SourceGraphic" in="featherspot"/>
<feGaussianBlur in="SourceGraphic" result="outfocus" stdDeviation="2"/>
<feComposite operator="over" in="infocus" in2="outfocus"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="20px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#focus-blur)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/a/af/Fruit_Stall_in_Barcelona_Market.jpg" x="340px" y="20px" width="300px" height="200px" preserveAspectRatio="xMinYMin meet"/>
</svg>
( Daderot의 원본 이미지 , Wikimedia Commons에서)
색상 조작 필터 : 포스터 라이징
<svg width="800px" height="600px" >
<defs>
<filter id="posterize" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncR type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncG type="discrete" tableValues="0 0.25 0.75 1.0"/>
<feFuncB type="discrete" tableValues="0 0.25 0.75 1.0"/>
</feComponentTransfer>
</filter>
</defs>
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="20px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet" />
<image filter="url(#posterize)" xlink:href="https://upload.wikimedia.org/wikipedia/commons/4/42/Andy_Warhol_1975.jpg" x="340px" y="20px" width="300px" height="600px" preserveAspectRatio="xMinYMin meet"/>
</svg>
흐림 필터 : 흐리게 강조 표시
이 필터는 원본 그래픽의 고휘도 영역 만 선택하고 내용을 흐리게하고 흐리게 처리 된 내용을 원본 위에 합성합니다.
<svg width="800px" height="600px">
<defs>
<filter id="highlightblur" color-interpolation-filters="sRGB">
<feColorMatrix type="luminanceToAlpha" in="SourceGraphic" result="lumMap"/>
<feComponentTransfer in="lumMap" result="highlightMask">
<feFuncA type="discrete" tableValues="0 0 0 0 0 0 0 1"/>
</feComponentTransfer>
<feComposite operator="in" in="SourceGraphic" in2="highlightMask" result="highlights"/>
<feGaussianBlur in="highlights" stdDeviation="3" result="highBlur"/>
<feComposite operator="over" in="highBlur" in2="SourceGraphic" result="final"/>
</filter>
</defs>
<image filter="url(#highlightblur)" x="0" y="-40" width="780" height="600" preserveAspectRatio="true" xlink:href="http://i554.photobucket.com/albums/jj424/allbowerpower/Christmas%202009/ChristmasTablesetting016b.jpg"
/>
</svg>
Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow