एसवीजी <rect>

SVG आकार

SVG कुछ प्री-डिफाइन्ड आकार एलीमेंट्स डेवलपर के लिए उपलब्ध हैं:

• वर्गाकार <rect>
• वृत्त <circle>
• अभिमत <ellipse>
• सीधी रेखा <line>
• विभाजित रेखा <polyline>
• बहुभुज <polygon>
• पथ <path>

अगले अध्याय में rect एलीमेंट से हर एलीमेंट को समझाया जाएगा。

SVG वर्ग - <rect>

उदाहरण 1

<rect> एलिमेंट चतुर्भुज और चतुर्भुज आकार के विविध रूप को बनाने के लिए प्रयोग किया जाता है:

यह SVG कोड है:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

स्वयं आजमाएं

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

• <rect> एलिमेंट के width और height गुण चतुर्भुज की ऊंचाई और चौड़ाई को परिभाषित करते हैं
• style गुण चतुर्भुज के CSS गुणों को परिभाषित करने के लिए प्रयोग किया जाता है
• CSS fill गुण चतुर्भुज के भरने का रंग परिभाषित करता है
• CSS border-width गुण चतुर्भुज के किनारे की चौड़ाई परिभाषित करता है
• CSS stroke गुण चतुर्भुज के किनारे का रंग परिभाषित करता है

उदाहरण 2

हम एक और नए गुणों वाले उदाहरण को देखेंगे:

यह SVG कोड है:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

स्वयं आजमाएं

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

• x गुण में चतुर्भुज के बाईं स्थान को परिभाषित करता है (उदाहरण: x="50" चतुर्भुज को बाईं बाहरी मार्ग 50 px में स्थापित करता है)
• y गुण में चतुर्भुज के ऊपरी स्थान को परिभाषित करता है (उदाहरण: y="20" चतुर्भुज को ऊपरी बाहरी मार्ग 20 px में स्थापित करता है)
• CSS fill-opacity गुण भरने के रंग की अस्पष्टता को परिभाषित करता है (वैध आयाम: 0 से 1 तक)
• CSS border-opacity गुण लाइन के रंग की अस्पष्टता को परिभाषित करता है (वैध आयाम: 0 से 1 तक)

उदाहरण 3

पूर्ण एलिमेंट की अस्पष्टता परिभाषित करने के लिए:

यह SVG कोड है:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>

स्वयं आजमाएं

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

• CSS opacity गुण एक पूर्ण एलिमेंट की अस्पष्टता को परिभाषित करता है (वैध आयाम: 0 से 1 तक)

उदाहरण 4

अंतिम उदाहरण, गोलीयां वाले चतुर्भुज को बनाना:

यह SVG कोड है:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

स्वयं आजमाएं

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

• र्एक्स और आरयी गुणों ने वृत्ताकार त्रिभुज के कोनों को गोल बनाया