آبشار گausssian SVG

باید فیلترهای SVG در داخل برچسب <defs> تعریف شوند

آبشار گausssian

برچسب <filter> برای تعریف فیلترهای SVG استفاده می‌شود. ویژگی必需 id برچسب <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>

توضیح کد:

  • ویژگی id برچسب <filter> یک نام منحصر به فرد برای فیلتر تعریف می‌کند (همچنین می‌تواند توسط چندین عنصر در مستند استفاده شود)
  • ویژگی filter:url برای پیوند دادن عناصر به فیلتر استفاده می‌شود. هنگام پیوند دادن id فیلتر، باید از علامت # استفاده شود
  • اثرات فیلتر از طریق برچسب <feGaussianBlur> تعریف می‌شوند. پسوند fe برای تمامی فیلترها قابل استفاده است
  • ویژگی stdDeviation برچسب <feGaussianBlur> می‌تواند میزان تارگی را تعریف کند
  • بخش 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>

نمونه مشاهده