एसवीजी <रेक्ट>

एसवीजी आकार

SVG में कुछ पूर्वनिर्धारित आकार तत्व होते हैं जिनका उपयोग डेवलपर्स द्वारा किया जा सकता है:

• आयत <आयत>
• मंडली <सर्कल>
• अंडाकार <दीर्घवृत्त>
• लाइन <लाइन>
• पॉलीलाइन <पॉलीलाइन>
• बहुभुज <बहुभुज>
• पथ <पथ>

निम्नलिखित अध्याय प्रत्येक तत्व की व्याख्या करेंगे, जो रेक्ट तत्व से शुरू होता है।

एसवीजी आयत - <रेक्ट>

उदाहरण 1

<rect> तत्व का उपयोग आयत और आयत आकार की विविधताओं को बनाने के लिए किया जाता है:

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

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

• <rect> तत्व की चौड़ाई और ऊँचाई विशेषताएँ आयत की ऊँचाई और चौड़ाई को परिभाषित करती हैं
• शैली विशेषता का उपयोग आयत के लिए CSS गुणों को परिभाषित करने के लिए किया जाता है
• CSS भरण गुण आयत के भरण रंग को परिभाषित करता है
• CSS स्ट्रोक-चौड़ाई गुण आयत की सीमा की चौड़ाई को परिभाषित करता है
• CSS स्ट्रोक गुण आयत की सीमा के रंग को परिभाषित करता है

उदाहरण 2

आइए एक और उदाहरण देखें जिसमें कुछ नई विशेषताएं शामिल हैं:

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

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

• x विशेषता आयत की बाईं स्थिति को परिभाषित करती है (उदाहरण के लिए x = "50" आयत को बाएँ हाशिये से 50 px रखता है)
• Y विशेषता आयत की शीर्ष स्थिति को परिभाषित करती है (जैसे y="20" आयत को शीर्ष मार्जिन से 20 px रखती है)
• CSS भरण-अस्पष्टता गुण भरण रंग की अस्पष्टता को परिभाषित करता है (कानूनी सीमा: 0 से 1)
• CSS स्ट्रोक-अपारदर्शिता गुण स्ट्रोक रंग की अस्पष्टता को परिभाषित करता है (कानूनी सीमा: 0 से 1)

उदाहरण 3

संपूर्ण तत्व के लिए अपारदर्शिता को परिभाषित करें:

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

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

• CSS अपारदर्शिता गुण पूरे तत्व के लिए अपारदर्शिता मान को परिभाषित करता है (कानूनी सीमा: 0 से 1)

उदाहरण 4

अंतिम उदाहरण, गोल कोनों के साथ एक आयत बनाएँ:

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

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

• rx और ry विशेषताएँ आयत के कोनों को गोल करती हैं