SVG धुंधली प्रभाव

<defs> और <filter>

सभी SVG फ़िल्टर <defs> एलीमेंट में परिभाषित<defs> एलीमेंट (definitions) का श्रुति है, जिसमें विशिष्ट एलीमेंट (जैसे फ़िल्टर) की परिभाषा है।

<filter> एलीमेंट SVG फ़िल्टर को परिभाषित करता है。<filter> एलीमेंट का एक अनिवार्य id अटेब्यूट है जो फ़िल्टर को पहचानता है। फिर ग्राफ़िक्स फ़िल्टर का उपयोग करने के लिए इसके इंडिकेटर के रूप में इसे संदर्भित किया जाता है。

SVG <feGaussianBlur>

उदाहरण 1

<feGaussianBlur> एलीमेंट धुंधलापन प्रभाव को बनाने के लिए उपयोग किया जाता है:

यह SVG कोड है:

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

स्वयं प्रयोग करें

कोड व्याख्या:

• <filter> एलीमेंट के id अटेब्यूट फ़िल्टर के अनूठे नाम को परिभाषित करता है
• <feGaussianBlur> एलीमेंट धुंधलापन प्रभाव को परिभाषित करता है
• in="SourceGraphic" विशिष्ट किया गया है कि पूरे एलीमेंट के लिए किए गए प्रभाव
• stdDeviation अटिबात धुंधली मात्रा को परिभाषित करता है
• <rect> एलीमेंट के filter अटिबात को "f1" फिल्टर से जोड़ा जाता है