SVG गौसियन धुंधलापन

SVG फिल्टर को अनिवार्यता से <defs> टैग में परिभाषित करना है

गौसियन धुंधलापन (Gaussian Blur)

<filter> टैग का उपयोग किया जाता है कि SVG फिल्टर को कैसे परिभाषित किया जाए? फिल्टर को कौन-सा ग्राफिक पर लगाया जाए?

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

उदाहरण देखें