एचटीएमएल ग्राफिक्स

ग्राफिक्स होम

गूगल मानचित्र

मानचित्र परिचय मैप्स बेसिक मैप्स ओवरले मानचित्र घटनाक्रम मानचित्र नियंत्रण मानचित्र प्रकार मानचित्र संदर्भ

एसवीजी ट्यूटोरियल

एसवीजी परिचय एचटीएमएल में एसवीजी एसवीजी आयत एसवीजी सर्किल एसवीजी एलिप्से एसवीजी लाइन एसवीजी बहुभुज एसवीजी पॉलीलाइन एसवीजी पथ एसवीजी पाठ एसवीजी पथपाकर एसवीजी फ़िल्टर परिचय एसवीजी धुंधला प्रभाव एसवीजी ड्रॉप शैडो एसवीजी रैखिक एसवीजी रेडियल एसवीजी उदाहरण एसवीजी संदर्भ

कैनवास ट्यूटोरियल

कैनवास परिचय कैनवास ड्राइंग कैनवास निर्देशांक कैनवास ग्रेडिएंट कैनवास पाठ कैनवास छवियां कैनवास संदर्भ

कैनवास घड़ी

घड़ी परिचय घडी का मुख घड़ी संख्या हाथ घड़ी घड़ी प्रारंभ

एचटीएमएल गेम

खेल परिचय खेल कैनवास खेल के घटक खेल नियंत्रक खेल बाधाएं गेम स्कोर खेल छवियां खेल ध्वनि गेम ग्रेविटी खेल उछल खेल रोटेशन खेल आंदोलन

एसवीजी धुंधला प्रभाव


<defs> और <फ़िल्टर>

सभी इंटरनेट एसवीजी फ़िल्टर <defs> तत्व के भीतर परिभाषित हैं। परिभाषाओं के लिए <defs> तत्व छोटा है और इसमें विशेष तत्वों (जैसे फ़िल्टर) की परिभाषा शामिल है।

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


एसवीजी <feGaussianBlur>

उदाहरण 1

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

फेगौसियनब्लर

यहाँ एसवीजी कोड है:

उदाहरण

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

कोड स्पष्टीकरण:

  • <फ़िल्टर> तत्व की आईडी विशेषता फ़िल्टर के लिए एक अद्वितीय नाम को परिभाषित करती है
  • धुंधला प्रभाव <feGaussianBlur> तत्व द्वारा परिभाषित किया गया है
  • इन = "सोर्सग्राफिक" भाग परिभाषित करता है कि प्रभाव पूरे तत्व के लिए बनाया गया है
  • StdDeviation विशेषता धुंध की मात्रा को परिभाषित करती है
  • <rect> तत्व की फ़िल्टर विशेषता तत्व को "f1" फ़िल्टर से जोड़ती है