SVG <rect>

Mayroong mga pre-defined na shape element ang SVG, na maaring gamitin at pinatatakbo ng mga developer.

SVG Shape

Mayroong mga pre-defined na shape element ang SVG, na maaring gamitin at pinatatakbo ng mga developer:

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

Ang mga sumusunod na bahagi ay magtuturo sa iyo tungkol sa mga elemento, mula sa parilya bilang unang bahagi.

<rect> tag

<rect> tag ay ginagamit upang lumikha ng parilya at mga iba pang uri ng parilya.

Upang maunawaan kung paano ito gumagana, kopyahin ang mga code at ilagay sa notepad, pagkatapos ay i-save bilang "rect1.svg" file. Ilagay ang file sa direktoryo ng web:

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

Paliwanag ng Code:

  • Ang width at height attribute ng rect element ay nagtutukoy sa taas at lapad ng parilya
  • Ang style attribute ay ginagamit upang tanggapin ang mga attribute ng CSS
  • Ang fill attribute ng CSS ay nagtutukoy sa kulay ng puno ng parilya (halimbawa, rgb(0,0,0), pangalan ng kulay o heksadecimal na halaga)
  • Ang stroke-width attribute ng CSS ay nagtutukoy sa lapad ng border ng parilya
  • Ang stroke attribute ng CSS ay nagtutukoy sa kulay ng border ng parilya

Tingnan ito

Sa tingin natin ang ibang halimbawa na may bagong attribute:

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

Mga halimbawa ng paliwanag:

  • Ang x attribute ay nagtutukoy sa ekstremong kalaliman ng parilya (halimbawa, x="0" ay nagtutukoy na ang layo ng parilya mula sa kaliwang bahagi ng window ng browser ay 0px)
  • Ang y attribute ay nagtutukoy sa taas na posisyon ng parilya (halimbawa, y="0" ay nagtutukoy na ang layo ng parilya mula sa itaas ng window ng browser ay 0px)
  • Ang fill-opacity attribute ng CSS ay nagtutukoy sa paglalapat ng transparent ng kulay ng puno
  • Ang stroke-opacity attribute ng CSS ay nagtutukoy sa paglalapat ng transparent ng kulay ng linis (Ang lehitimong saklaw ay: 0 - 1)

View Example

Para tanggap ang buong elemento ang paglalapat ng透明度：

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

Paliwanag ng Code:

Ang attribute na opacity ng CSS ang nagtutukoy sa buong transparensya ng elemento (mga lebel na ginamit: 0 - 1)

View Example

Huling halimbawa, gumawa ng parihaba na may likurang parang likuran:

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

Paliwanag ng Code:

Ang attribute na rx at ry ng rect ay magbibigay ng parang likuran sa parihaba (mga lebel na ginamit: 0 - 1)

View Example