필터는 SVG의 가장 강력한 기능으로 간주 될 수 있습니다. 전문 소프트웨어에서만 사용할 수있는 필터 효과를 그래픽 (그래픽 요소 및 컨테이너 요소)에 추가 할 수 있습니다. 이를 통해 클라이언트 측에서 이미지를 쉽게 생성하고 수정할 수 있습니다. 또한 필터는 원본 문서의 구조를 파괴하지 않으므로 매우 유지 관리 가능합니다.
필터는 필터 요소로 정의됩니다 . 필요할 때 필터 효과가 필요한 그래픽이나 컨테이너에 필터 속성을 추가하고 관련 필터를 참조하십시오.필터 요소에는 많은 필터 원자 연산이 포함되어 있습니다. 각 원자 작동은 들어오는 객체에서 기본 그래픽 작업을 수행하고 그래픽 출력을 생성합니다. 대부분의 원자 연산은 기본적으로 RGBA 사진을 생성합니다. 각 원자 작동에 대한 입력은 소스 그래프 또는 다른 원자 연산의 결과 일 수 있습니다. 따라서 필터 효과를 인용하는 프로세스는 소스 그래픽에 관련 필터 원자 작업을 적용하고 마지막으로 새로운 그래픽을 생성하여 렌더링하는 것입니다.
컨테이너 (예 : G 요소)의 필터 속성을 사용하면 필터 효과가 컨테이너의 모든 요소에 적용됩니다. 그러나 컨테이너의 요소는 화면에 직접 렌더링되지 않지만 일시적으로 저장됩니다. 그런 다음 그래픽 명령은 참조 된 필터 요소를 처리 한 다음 렌더링하는 프로세스의 일부로 실행됩니다. 이것은 sourceGraphic 및 sourcealpha를 사용하여 지정됩니다. 이 효과는 아래 두 번째 예에서 세 번째 사례에서 입증됩니다.
일부 필터 효과는 정의되지 않은 픽셀 포인트를 생성하여 투명한 효과로 처리됩니다.
예를 살펴 보겠습니다.
<svg viewbox = "0 0 200 120"
xmlns = "http://www.w3.org/2000/svg"version = "1.1">
<title> SVG 필터 효과 예 </title>
<sc> 다양한 필터 효과를 사용하여 한 쌍의 그래픽의 3D 조명 효과를 달성하십시오. </desc>
<defs>
<filter id = "MyFilter"FilterUnits = "UsersPaceOnuse"x = "0"y = "0">
<fegaussianblur in = "sourcealpha"stddeviation = "4"result = "blur"/>
<feoffset in = "blur"dx = "4"dy = "4"result = "offsetBlur"/>
<fespecularlighting in = "blur"surfacescale = "5"SpecularConstant = ". 75"
specularexponent = "20"Lighting-Color = "#bbbbbbb"
결과 = "사양">
<fepointlight x = "-5000"y = "-10000"z = "200000"/>
</fescularlighting>
<fecomposite in = "specout"in2 = "sourcealpha"연산자 = "in result ="specout "/>
<fecomposite in = "sourceGraphic"in2 = "specout"연산자 = "Arithmetic"
k1 = "0"k2 = "1"k3 = "1"k4 = "0"result = "litpaint"/>
<emerge>
<femergenode in = "OffsetBlur"/>
<femergenode in = "litpaint"/>
</femerge>
</필터>
</defs>
<rect x = "1"y = "1"fill = "#88888"stroke = "blue" />
<g filter = "url (#myfilter)">
<g>
<Path Fill = "None"Stroke = "#d90000"Stroke-width = "10"
D = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 Z" />
<Path Fill = "#d90000"
D = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80,80 z" />
<g fill = "#ffffff"stroke = "black"font-size = "45"font-family = "Verdana">
<text x = "52"y = "76"> svg </text>
</g>
</g>
</g>
</svg>
Firefox에서 실행되는이 예제의 효과는 마지막 이미지의 결과입니다.
참고 : 다른 브라우저에는 약간의 차이가있을 수 있습니다.
이 필터는 6 가지 효과를 사용합니다. 차례로 (단일 단계 렌더링은 위 그림에 표시됩니다 :) :
Fegaussianblur :이 단계는 가우스 블러 처리를 수행하는 것입니다. 이 특수 효과의 입력은 소스 이미지의 투명성 값이며 출력은 임시 버퍼 블러에 저장됩니다. 블러 값은 아래의 Feoffset 및 fescularlighting의 입력으로 사용됩니다.
FEOFFSET :이 단계는 이미지를 일부 위치로 변환하는 것입니다. 이 효과의 입력은 이전 단계에서 생성 된 블러이며 새 캐시 오프셋 블러를 생성합니다.
Fespecularlighting :이 단계는 그림 표면을 빛으로 처리하는 것입니다. 입력은 첫 번째 단계에서 생성 된 블러이며 출력은 새 캐시 사양에 저장됩니다.
두 번의 분리 자산 :이 두 단계는 다른 캐시 레이어를 결합하고 있습니다.
대퇴골 :이 단계는 다른 층을 병합하는 것입니다. 이 단계는 일반적으로 최종 단계입니다. 각 캐시의 레이어를 융합시키고 최종 이미지를 생성하고 렌더링합니다. 이 단계는 배설물 특수 효과로 여러 번 완료 될 수 있지만 결국 여전히 편리하지 않습니다.
필터 요소 및 필터 효과 영역 필터 효과 영역은 필터 효과가 작동하는 영역을 나타냅니다. 이 영역의 크기는 필터 요소의 다음 속성으로 정의됩니다. FilterUnits = userSpaceOnuse | ObjectBoundingbox이 속성은 x, y, 너비 및 높이로 사용되는 좌표 공간을 정의합니다. 다른 단위 관련 속성과 마찬가지로이 속성에는 userpaceonuse와 objectboundingbox (기본값)의 두 가지 값이 있습니다.
UsersPaceOnuse는 필터 요소를 참조하는 요소를 사용하는 사용자 좌표 시스템을 나타냅니다.
ObjectBoundingbox는 필터 요소를 값 범위로 참조하는 경계 상자의 백분율을 사용하는 것을 의미합니다.
x, y, 너비, 높이이 특성은 필터가 작동하는 직사각형 영역을 정의합니다. 필터 효과는이 영역 이외의 지점에 적용되지 않습니다. x, y의 기본값은 -10%이고 너비와 높이의 기본값은 120%입니다.
필터링이 속성은 중간 캐시 영역의 크기를 정의하므로 캐시 이미지의 품질도 정의합니다. 일반적 으로이 값은 필요하지 않으며 브라우저는 적절한 값 자체를 선택합니다. 일반적으로 필터 효과 영역은 배경 지점에 정확히 일치하고 포인트를 하나씩 정의해야하며, 이는 특정 효율의 이점을 가져올 것입니다.
이러한 특성 외에도 필터 요소의 다음 속성도 중요합니다.
PrimitiveUnits = UsersPaceOnuse | ObjectBoundingbox이 속성은 각 원자 작동에서 좌표 및 길이로 사용되는 좌표 공간을 정의합니다. 이 속성의 값은 UsersPaceOnuse 및 ObjectBoundingbox입니다. 그러나 기본값은 userspaceonuse입니다.
xlink : href = <iri>이 속성은 현재 필터 요소의 다른 필터 요소를 참조하는 데 사용됩니다.
필터 요소는 부모 노드의 속성 만 상속하고 필터 요소를 참조하는 요소의 속성을 상속하지는 않습니다.
필터 개요 다양한 필터 원자 연산은 자세히 설명되지 않습니다. 필요한 경우 공식 문서를 확인할 수 있습니다. 이러한 작업의 공통점을 살펴 보겠습니다. IN 속성을 제외하고 아래의 다른 속성은 모든 원자 연산에 사용할 수 있습니다. x, y, 너비, 높이 나는이 속성에 대해별로 말하지 않을 것입니다. 필터 원자가 작동하는 영역을 정의하므로 필터 영역이 될 수 있습니다. 이러한 속성은 필터 요소의 동작 영역에 의해 제한됩니다. 기본적으로 값은 각각 0, 0, 100% 및 100%입니다. 이들 원자의 작용 영역은 필터 요소의 작용 영역이 작동하지 않는다. 결과이 단계의 결과를 저장하십시오. 결과를 지정한 후 동일한 필터 요소의 다른 후속 작업을 IN을 사용하는 입력으로 지정할 수 있습니다. 위의 예를 참조하여이를 알 수 있습니다. 이 값이 생략되면 다음 단계의 암시 적 입력으로 만 사용할 수 있습니다. 다음 단계가 IN이 포함 된 입력을 이미 지정한 경우 다음 단계에서 지정된 입력이 우선합니다.
~에이 단계의 입력을 나타냅니다. IN 속성이 생략되면 이전 단계의 결과는 기본적 으로이 단계의 입력으로 사용됩니다. 단계가 생략되면 SourceGraphic이 값으로 사용됩니다 (아래 설명 참조). IN 속성은 이전 결과에 저장된 값을 참조하거나 다음 6 가지 특수 값을 지정할 수 있습니다.
SourceGraphic :이 값은 현재 그래프 요소를 작업으로 사용하려는 입력을 나타냅니다.
SONCEALPHA :이 값은 현재 그래프 요소의 알파 값을 작업으로 사용하려는 입력을 나타냅니다.
배경 지식 :이 값은 현재 배경 스크린 샷을 작업에 입력하여 사용하는 것을 나타냅니다.
BackgroundAlpha :이 값은 현재 배경 스크린 샷의 알파 값을 사용하여 작업의 입력을 나타냅니다.
FILLPAINT :이 값은 현재 그래프 요소의 채우기 속성 값을 작업에 입력하여 사용합니다.
StrokePaint :이 값은 현재 그래픽 요소의 스트로크 속성의 값을 작업에 입력하여 사용합니다.
이러한 값 중에서 배경 지식 및 배경 알파는 이해하기 어려울 수 있습니다. 아래 두 가지 값을 살펴 보겠습니다.
액세스 배경 스크린 샷 일반적으로 필터 요소를 필터 효과의 소스 이미지로 참조하는 요소의 배경 스크린 샷을 직접 사용할 수 있습니다. 이 입력을 나타내는 값은 배경 지식 및 배경 알파이며, 이전의 값은 색상과 알파 값을 포함하고 후자는 알파 값 만 포함합니다. 이 사용법을 지원하려면 필터 요소를 참조하는 요소 에서이 기능을 명시 적으로 활성화해야하며 요소의 활성화 지상 속성을 설정해야합니다. enable-background = 축적 | 새로운 [<x> <y> <width> <높이>] | 상속이 속성은 컨테이너 요소에만 사용될 수 있으며 배경 스크린 샷을 찍는 방법을 정의합니다.
새로운 값은 다음을 나타냅니다. 컨테이너의 자식 요소가 컨테이너의 배경 스크린 샷에 액세스 할 수 있으며 컨테이너의 하위 요소는 배경과 장치에 렌더링됩니다.
축적은 기본값이며 그 효과는 컨텍스트에 따라 다릅니다. 상위 컨테이너 요소가 enable-background를 사용하는 경우 컨테이너의 모든 그래픽 요소가 배경 렌더링에 참여하게됩니다. 그렇지 않으면 부모 컨테이너가 배경 스크린 샷을 찍을 준비가되지 않았 으며이 요소의 그래픽 요소 표시는 장치에만 표시됩니다.
다음 예는 다음 값의 효과를 보여줍니다.
<svg viewbox = "0 1350 270"
xmlns = "http://www.w3.org/2000/svg"version = "1.1">
<title> 배경 스크린 샷 사용의 예 </title>
<sc> 다음 예제는 다양한 상황에서 배경 스크린 샷 사용을 설명합니다 </desc>
<defs>
<filter id = "shiftBgandBlur"
FilterUnits = "userSpaceOnuse"x = "0"y = "0">
<sc>이 필터는 소스 이미지를 폐기하지만 배경 스크린 샷을 사용합니다 </desc>
<feoffset in = "backgroundImage"dx = "0"dy = "125" />
<fegaussianblur stddeviation = "8" />
</필터>
<filter id = "shiftBgandBlur_withSourceGraphic"
FilterUnits = "userSpaceOnuse"x = "0"y = "0">
<sc>이 필터 특수 효과는 배경 스크린 샷과 현재 요소의 사진을 결합합니다 </desc>
<feoffset in = "backgroundImage"dx = "0"dy = "125" />
<fegaussianblur stddeviation = "8"result = "blur" />
<emerge>
<femergenode in = "blur"/>
<femergenode in = "SourceGraphic"/>
</femerge>
</필터>
</defs>
<g transform = "번역 (0,0)">
<sc> 첫 번째 사진은 필터를 추가하지 않는 효과 </desc>입니다.
<rect x = "25"y = "25"fill = "red"/>
<g 불투명도 = ". 5">
<circle cx = "125"cy = "75"r = "45"fill = "green"/>
<다각형 포인트 = "160,25 160,125 240,75"Fill = "Blue"/>
</g>
<rect x = "5"y = "5"fill = "none"stroke = "blue"/>
</g>
<g enable-background = "new"transform = "번역 (270,0)">
<sc> 두 번째 그림은 컨테이너에 필터 효과를 사용하는 것입니다 </desc>
<rect x = "25"y = "25"fill = "red"/>
<g 불투명도 = ". 5">
<circle cx = "125"cy = "75"r = "45"fill = "green"/>
<다각형 포인트 = "160,25 160,125 240,75"Fill = "Blue"/>
</g>
<g filter = "url (#shiftbgandblur)"/>
<rect x = "5"y = "5"fill = "none"stroke = "blue"/>
</g>
<g enable-background = "new"transform = "번역 (540,0)">
<sc> 세 번째 그림은 내부 컨테이너에 필터 효과를 사용하고 두 번째 그림과의 차이에주의를 기울이는 것입니다 </desc>
<rect x = "25"y = "25"fill = "red"/>
<g filter = "url (#shiftbgandblur)"itacity = ". 5">
<circle cx = "125"cy = "75"r = "45"fill = "green"/>
<다각형 포인트 = "160,25 160,125 240,75"Fill = "Blue"/>
</g>
<rect x = "5"y = "5"fill = "none"stroke = "blue"/>
</g>
<g enable-background = "new"transform = "translate (810,0)">
<sc> 네 번째 그림은 그래픽 요소에 필터 효과를 사용하는 것입니다 </desc>
<rect x = "25"y = "25"fill = "red"/>
<g 불투명도 = ". 5">
<circle cx = "125"cy = "75"r = "45"fill = "green"/>
<다각형 포인트 = "160,25 160,125 240,75"fill = "blue"
필터 = "URL (#shiftBgandBlur)"/>
</g>
<rect x = "5"y = "5"fill = "none"stroke = "blue"/>
</g>
<g enable-background = "new"transform = "번역 (1080,0)">
<sc> 다섯 번째 사진은 그래픽 요소에 다른 필터 효과를 사용하는 것입니다 </desc>
<rect x = "25"y = "25"fill = "red"/>
<g 불투명도 = ". 5">
<circle cx = "125"cy = "75"r = "45"fill = "green"/>
<다각형 포인트 = "160,25 160,125 240,75"fill = "blue"
filter = "url (#shiftbgandblur_withSourceGraphic)"/>
</g>
<rect x = "5"y = "5"fill = "none"stroke = "blue"/>
</g>
</svg>
렌더링은 다음과 같습니다 (첫 번째 행은 최종 렌더링이고 두 번째 행은 필터 효과입니다).
이 예제에는 5 개의 부분이 포함되어 있습니다 .1. 첫 번째 그룹의 그림은 필터 효과를 사용하지 않습니다.
2. 두 번째 그룹은 동일한 그림을 사용하지만 배경을 사용하는 효과를 가능하게합니다.
3. 세 번째 그룹은 동일한 그림을 사용하지만 내부 컨테이너의 필터 효과를 사용합니다.
4. 네 번째 그룹은 컨텐츠 컨테이너의 요소에 필터 효과를 사용합니다.
5. 마지막 그룹은 네 번째 그룹과 동일한 필터 효과를 사용하여 소스 이미지를 병합합니다.
필터의 개념은 실제로 매우 간단하지만 각 효과의 코드는 더 복잡해 보입니다. 사실, 우리는 그것을 시도한 후에 분명 할 것입니다. 그러나 다른 브라우저가 SVG를 다르게 지원하기 때문에 사용하기 전에 특정 효과를 직접 시도해야합니다.
실제 참조스크립트 인덱스 : http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
개발 센터 : https://developer.mozilla.org/en/svg
인기있는 참조 : http://www.chinasvg.com/
공식 문서 : http://www.w3.org/tr/svg11/