SVG 고스 모호함

SVG 필터는 <defs> 태그 내에서 정의해야 합니다

고스 모호함 (Gaussian Blur)

<filter> 태그는 SVG 필터를 정의합니다.<filter> 태그는 필터를 정의할 때 필터를 적용할 그래픽에 대해 어떤 필터를 사용할지 정의하는 필수 속성을 사용합니다?

<filter> 태그는 <defs> 태그 내에 숨겨져야 합니다.<defs> 태그는 definitions의 약자로, 필터와 같은 특수 요소를 정의할 수 있음을 의미합니다

아래 코드를 메모장에 복사하고, 파일을 "filter1.svg"로 저장하세요. 이 파일을 웹 디렉토리에 넣으세요:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

코드 설명:

  • <filter> 태그의 id 속성은 필터에 독립적인 이름을 정의할 수 있습니다 (동일한 필터는 문서의 여러 요소에서 사용될 수 있습니다)
  • filter:url 속성은 요소를 필터에 연결하는 데 사용됩니다. 필터 id를 연결할 때는 # 문자를 사용해야 합니다
  • 필터 효과는 <feGaussianBlur> 태그로 정의됩니다. fe 접두어는 모든 필터에 사용할 수 있습니다
  • <feGaussianBlur> 태그의 stdDeviation 속성은 모호함 정도를 정의할 수 있습니다
  • in="SourceGraphic" 이 부분은 전체 이미지로 인해 생성된 효과를 정의합니다

예제 보기

另一个 stdDeviation 값이 다른 예제

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40"
style="fill:#ff0000;stroke:#000000;
stroke-width:2;filter:url(#Gaussian_Blur)"/>
</svg>

예제 보기