SVG लाइनियर ग्रेडिएंट

<defs> और <filter>

सभी SVG फिल्टर <defs> एलीमेंट में परिभाषित किया जाता है。<defs> एलीमेंट में परिभाषित किया जाता है。

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

SVG <feOffset>

उदाहरण 1

<feOffset> एलीमेंट को शैडो अस्तर को बनाने के लिए उपयोग किया जाता है। सोच की विधि है: पहले एक SVG ग्राफिक (छवि या एलीमेंट) प्राप्त करें, फिर xy सतह पर थोड़ा आगे बढ़ाएं।

पहला उदाहरण एक चतुर्भुज को ऑफसेट करता है (इसके लिए <feOffset>），फिर मूल छवि को ऑफसेट छवि के ऊपर मिश्रित करें (इसके लिए <feBlend>）：

यह SVG कोड है:

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f1)" />
</svg>

अपने आप साफ़ी से प्रयोग करें

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

• <filter> एलीमेंट का id एट्रिब्यूट फिल्टर के अनूठे नाम को परिभाषित करता है
• <rect> एलीमेंट का filter एट्रिब्यूट इस एलीमेंट को "f1" फिल्टर से जोड़ता है

उदाहरण 2

अब, आप छवि को धुंधला कर सकते हैं (इसके लिए <feGaussianBlur>）：

यह SVG कोड है:

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f2)" />
</svg>

अपने आप साफ़ी से प्रयोग करें

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

• <feGaussianBlur> एलीमेंट का stdDeviation एट्रिब्यूट धुंधलापन को परिभाषित करता है

उदाहरण 3

अब, छाया को काला करें:

यह SVG कोड है:

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f3)" />
</svg>

अपने आप साफ़ी से प्रयोग करें

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

• <feOffset> एलीमेंट का in अट्रिब्यूट को "SourceAlpha" में बदला गया है, जो पूरे RGBA पिक्सल के बजाय एल्फा चैनल का उपयोग करता है

उदाहरण 4

अब, छाया को एक रंग में संस्करण करें:

यह SVG कोड है:

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill="yellow" filter="url(#f4)" />
</svg>

अपने आप साफ़ी से प्रयोग करें

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

• <feColorMatrix> फिल्टर का उपयोग एक बिना छोटी छवि के रंग को काफी निकट श्वेत करने के लिए किया जाता है। माट्रिक्स में तीन '0.2' मूल्य रेड, ग्रीन और ब्लू चैनलों से गुजरते हैं। उनके मूल्य को कम करने से रंग श्वेत की ओर जाता है (श्वेत का मूल्य 0 है)