SVG گاوس تاری

SVG فیلٹر کو ضرور <defs> کے نشان کار میں تعریف کیا جانا چاہئے

گاوس کی تاری

<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>

مثال را ببینید