SVG <rect>

SVG రూపాలు

SVG కొన్ని ప్రత్యేకించిన రూపాలు డెవలపర్లకు లభిస్తాయి:

  • రెక్టాంగలం <rect>
  • స్పర్ధించిన వక్రం <circle>
  • కోణాకార వక్రం <ellipse>
  • లైన్ <line>
  • బహుకోణ పాత్రికేయం <polyline>
  • బహుకోణం <polygon>
  • మార్గం <path>

తరువాతి అధ్యాయాలు rect కొన్ని మొదటి కి గురించి వివరిస్తాయి.

SVG రెక్టాంగలం - <rect>

ఉదాహరణ 1

<rect> రెక్టాంగళాన్ని మరియు రెక్టాంగళం రూపాలను సృష్టించడానికి ఉపయోగించే అట్టిబింబిక గుణం:

క్షమించండి, మీ బ్రౌజర్ స్ట్రైన్ లోని SVG ను మద్దతు చేయలేదు.

ఇది 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)" />

亲自试一试

代码解释：

  • <rect> అట్టిబింబిక గుణం వెడల్పు మరియు పొడవును నిర్వచిస్తుంది
  • 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" />

亲自试一试

代码解释：

  • 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" />

亲自试一试

代码解释：

  • 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" />

亲自试一试

代码解释：

  • rx 和 ry 属性使矩形的角变圆