ఎస్విజి <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 యొక్క 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 అంశాలు రెండు పరంగా చతురస్రాకారాన్ని గుండ్రంగా చేస్తాయి.

ఉదాహరణను చూడండి