SVG 필터
5324 단어 SVG
SVG 필터링
SVG에서는 필터라고 하여, 그린 것에 흐림 등의 이펙트를 걸리는 처리를 실시할 수 있습니다.
filter 요소
filter는 요소로 정의할 수 있습니다.
filter 요소 내에서 다양한 요소로 filter를 정의합니다.
아래에서는 feGaussianBlur을 사용합니다.
Gaussian Blur는 가우스 분포의 공식을 사용한 흐림입니다. 자세한 내용은 아래 링크에서 확인하십시오.
h tp : // 엔.ぃきぺぢ아. 오 rg / uuki /
filter.svg<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="5,10" />
</filter>
</defs>
<circle cx="50" cy="50" r="50" fill="red" stroke="blue" stroke-wdith="5" filter="url(#gaussian)" />
</svg>
sddDeviation은 가우스 분포 표현식의 x, y 값을 나타냅니다.
in 속성은 필터의 입력 유형을 나타내고 SourceGraphic은 필터가 적용되는 그래픽을 사용합니다.
결과는 다음과 같습니다.
![svg_filter1.png](https://s1.md5.ltd/image/fcab897f7112bb494dc2e605c4802c94.png)
feMerge
필터를 여러 레이어 준비하고 겹치고 싶을 때는 feMerge 요소를 사용합니다.
feMerge 요소는 자식 요소에 feMergeNode를 가지며 이를 겹칩니다.
아래는 feGaussianBlur과 feOffset(dx와 dy만 어긋나는 필터)를 준비하여 겹쳐 봅니다.
filter2.svg<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceAlpha" stdDeviation="5,10" result="blur" />
<feOffset in="SourceGraphic" dx="5" fy="5" result="offset" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="offset" />
</feMerge>
</filter>
</defs>
<circle cx="50" cy="50" r="50" fill="red" filter="url(#gaussian)" />
</svg>
필터를 쓸 수 있는 결과는 result로 이름을 붙일 수 있으므로, 그 result의 값을 feMergeNode의 in으로 해 중첩하고 있습니다.
결과는 다음과 같습니다.
![svg_filter2.png](https://s1.md5.ltd/image/7088cd7020697b5ffae985acec3a287b.png)
다양한 필터
필터에는 다른 많은 요소가 있습니다.
또한 feDiffuseLighting과 feSpecularLighting에는 광원을 설정할 수 있으며 광원을 설정하는 요소에는 feDistantLight, fePointLight, feSpotLight가 있습니다.
이곳은 또 다른 기회에 설명하려고 합니다.
Reference
이 문제에 관하여(SVG 필터), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sassy_watson/items/d49025f1bf06088f72bb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
filter는 요소로 정의할 수 있습니다.
filter 요소 내에서 다양한 요소로 filter를 정의합니다.
아래에서는 feGaussianBlur을 사용합니다.
Gaussian Blur는 가우스 분포의 공식을 사용한 흐림입니다. 자세한 내용은 아래 링크에서 확인하십시오.
h tp : // 엔.ぃきぺぢ아. 오 rg / uuki /
filter.svg
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceGraphic" stdDeviation="5,10" />
</filter>
</defs>
<circle cx="50" cy="50" r="50" fill="red" stroke="blue" stroke-wdith="5" filter="url(#gaussian)" />
</svg>
sddDeviation은 가우스 분포 표현식의 x, y 값을 나타냅니다.
in 속성은 필터의 입력 유형을 나타내고 SourceGraphic은 필터가 적용되는 그래픽을 사용합니다.
결과는 다음과 같습니다.
![svg_filter1.png](https://s1.md5.ltd/image/fcab897f7112bb494dc2e605c4802c94.png)
feMerge
필터를 여러 레이어 준비하고 겹치고 싶을 때는 feMerge 요소를 사용합니다.
feMerge 요소는 자식 요소에 feMergeNode를 가지며 이를 겹칩니다.
아래는 feGaussianBlur과 feOffset(dx와 dy만 어긋나는 필터)를 준비하여 겹쳐 봅니다.
filter2.svg<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceAlpha" stdDeviation="5,10" result="blur" />
<feOffset in="SourceGraphic" dx="5" fy="5" result="offset" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="offset" />
</feMerge>
</filter>
</defs>
<circle cx="50" cy="50" r="50" fill="red" filter="url(#gaussian)" />
</svg>
필터를 쓸 수 있는 결과는 result로 이름을 붙일 수 있으므로, 그 result의 값을 feMergeNode의 in으로 해 중첩하고 있습니다.
결과는 다음과 같습니다.
![svg_filter2.png](https://s1.md5.ltd/image/7088cd7020697b5ffae985acec3a287b.png)
다양한 필터
필터에는 다른 많은 요소가 있습니다.
또한 feDiffuseLighting과 feSpecularLighting에는 광원을 설정할 수 있으며 광원을 설정하는 요소에는 feDistantLight, fePointLight, feSpotLight가 있습니다.
이곳은 또 다른 기회에 설명하려고 합니다.
Reference
이 문제에 관하여(SVG 필터), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sassy_watson/items/d49025f1bf06088f72bb
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gaussian" x="0" y="0" width="100" heihgt="100" filterUnits="objectBoundingBox">
<feGaussianBlur in="SourceAlpha" stdDeviation="5,10" result="blur" />
<feOffset in="SourceGraphic" dx="5" fy="5" result="offset" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="offset" />
</feMerge>
</filter>
</defs>
<circle cx="50" cy="50" r="50" fill="red" filter="url(#gaussian)" />
</svg>
필터에는 다른 많은 요소가 있습니다.
또한 feDiffuseLighting과 feSpecularLighting에는 광원을 설정할 수 있으며 광원을 설정하는 요소에는 feDistantLight, fePointLight, feSpotLight가 있습니다.
이곳은 또 다른 기회에 설명하려고 합니다.
Reference
이 문제에 관하여(SVG 필터), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sassy_watson/items/d49025f1bf06088f72bb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)