SVG <rect>

SVG Hugis

Mayroon palang predefined na mga elemento ng hugis na maaaring gamitin ng mga developer ang SVG:

• Rectangle <rect>
• Circle <circle>
• Ellipse <ellipse>
• Line <line>
• Polyline <polyline>
• Polygon <polygon>
• Path <path>

Sunod na mga kabanata ay magsisimula sa elementong rect.

SVG 矩形 - <rect>

Eli 1

<rect> Ang elemento ay ginagamit upang gumawa ng paranggulo at iba pang uri ng hugis ng paranggulo:

Ito ang SVG code:

<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>

Try It Yourself

Explaination ng Code:

• Ang width at height attribute ng <rect> element ay nagtataglay ng taas at lapad ng paranggulo
• Ang style attribute ay ginagamit upang maglagay ng CSS attribute ng paranggulo
• Ang CSS fill attribute ay nagtataglay ng kulay ng pagpunan ng paranggulo
• Ang CSS border-width attribute ay nagtataglay ng lapad ng border ng paranggulo
• Ang CSS stroke attribute ay nagtataglay ng kulay ng border ng paranggulo

Halimbawa 2

Saan naman magiging halimbawa na may bagong attribute:

Ito ang SVG code:

<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>

Try It Yourself

Explaination ng Code:

• Ang x attribute ay nagtataglay ng kaliwang posisyon ng paranggulo (halimbawa x="50" ay ilalagay ang paranggulo sa posisyon na 50 px mula sa kaliwang lalim)
• Ang y attribute ay nagtataglay ng taas na posisyon ng paranggulo (halimbawa y="20" ay ilalagay ang paranggulo sa posisyon na 20 px mula sa taas na lalim)
• Ang CSS fill-opacity attribute ay nagtataglay ng walang liwanag ng kulay ng pagpunan (legal na saklaw: 0 hanggang 1)
• Ang CSS border-opacity attribute ay nagtataglay ng walang liwanag ng kulay ng border (legal na saklaw: 0 hanggang 1)

Halimbawa 3

Tataglay ang walang liwanag ng buong elemento:

Ito ang SVG code:

<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>

Try It Yourself

Explaination ng Code:

• Ang CSS opacity attribute ay nagtataglay ng halaga ng walang liwanag ng buong elemento (legal na saklaw: 0 hanggang 1)

Halimbawa 4

Huling halimbawa, gumawa ng bilog na sulok na rectangulo:

Ito ang SVG code:

<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>

Try It Yourself

Explaination ng Code:

• Ang mga attribute na rx at ry ay gumagawa ng mga sulok ng parihaba na naging matatagpuan