एसवीजी <rect>

SVG कुछ पूर्व-निर्धारित आकार एलिमेंट हैं जो डेवलपर्स द्वारा उपयोग और ऑपरेशन के लिए उपलब्ध हैं。

SVG आकार

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

  • वृत्त <rect>
  • गोल <circle>
  • अड़िचे <ellipse>
  • लाइन <line>
  • फोलिया <polyline>
  • बहुभुज <polygon>
  • पथ <path>

अगले अध्याय में आपको इन एलिमेंट को बताया जाएगा, पहले से वृत्त एलिमेंट से शुरू करते हैं。

<rect> टैग

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

इसके कामकाज को समझने के लिए इन कोड को नोटपेड में कॉपी करें, फिर "rect1.svg" फ़ाइल के रूप में सहेजें। इस फ़ाइल को वेब डिरेक्ट्री में रखें:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>
</svg>

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

  • rect एलिमेंट के width और height एट्रिब्यूट वृत्त की चौड़ाई और ऊंचाई को परिभाषित कर सकते हैं
  • style एट्रिब्यूट का उपयोग CSS एट्रिब्यूट को परिभाषित करने के लिए किया जाता है
  • CSS का fill एट्रिब्यूट वृत्त के भरने के रंग को परिभाषित करता है (rgb मान, रंग नाम या हेक्साडेसिमल मान)
  • CSS का stroke-width एट्रिब्यूट वृत्त के किनारे की चौड़ाई परिभाषित करता है
  • CSS का stroke एट्रिब्यूट वृत्त के किनारे का रंग परिभाषित करता है

इस उदाहरण को देखें

इसके लिए एक और नए एट्रिब्यूट वाले उदाहरण देखें:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/>
</svg>

उदाहरण व्याख्या:

  • x एट्रिब्यूट वृत्त के बाएं स्थान को परिभाषित करता है (उदाहरण में, x="0" वृत्त को ब्राउज़र विंडो के बाएं से 0px की दूरी पर परिभाषित करता है)
  • y एट्रिब्यूट वृत्त के शीर्ष स्थान को परिभाषित करता है (उदाहरण में, y="0" वृत्त को ब्राउज़र विंडो के शीर्ष से 0px की दूरी पर परिभाषित करता है)
  • CSS का fill-opacity एट्रिब्यूट भरने के रंग की पारदर्शिता को परिभाषित करता है (वैध दायरा: 0 - 1)
  • CSS का stroke-opacity एट्रिब्यूट बाहरी रंग की पारदर्शिता को परिभाषित करता है (वैध दायरा: 0 - 1)

उदाहरण देखें

पूरे एलिमेंट के लिए पारदर्शिता निर्धारित करें:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>
</svg>

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

CSS की opacity विशेषता पूरे एलिमेंट की पारदर्शिता को परिभाषित करती है (वैध परिधि: 0 - 1)

उदाहरण देखें

अंतिम उदाहरण, वृत्ताकार वृत्ताकार त्रिभुज बनाने के लिए:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="20" y="20" rx="20" ry="20" width="250"
height="100" style="fill:red;stroke:black;
stroke-width:5;opacity:0.5"/>
</svg>

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

rx और ry विशेषताएँ वृत्ताकार वृत्ताकार त्रिभुज उत्पन्न करती हैं。

उदाहरण देखें