SVG <rect>

SVG 有一些预定义的形状元素，可被开发者使用和操作。

SVG 形状

SVG 有一些预定义的形状元素，可被开发者使用和操作：

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

Babban abubuwan da a za a kai sharhi su, daga baya daga kwallon fata.

<rect> aiki

<rect> aiki wanda ke tukaci kwallon fata, kuma nau'war kwallon fata.

Domin a fahimci yadda su a yi iya ayyukan, koyi akwai koodu na a kopi a kan nafin 'Notepad', kuma a kafa a cikin fayil na 'rect1.svg'. Koyi fayil na a cikin tarin 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>

Code Explanation:

  • rect yankin width da height yankin na kwallon fata wanda ke tukaci rufe kwallon da rufe kwallon
  • Arewa na style wanda ke tukaci nau'war CSS
  • Arewa CSS na fill wanda ke tukaci zane-a-wane na rufe kwallon (ribi na rgb, sunan zane-a-wane ko wauren hexadecimal)
  • Arewa CSS na stroke-width wanda ke tukaci rufe kwallon na rufe
  • Arewa CSS na stroke wanda ke tukaci zane-a-wane na rufe kwallon

Kai karfafa kwanan ita

Kai kawo misali na yana da nau'war jini:

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

Misali yadda a cikata:

  • x yanki na tukaci na yankin waje na fata (misali, x="0" tukaci cikakken fata zuwa waje na fata shiga 0px)
  • y yanki na tukaci na yankin tsaki na fata (misali, y="0" tukaci cikakken rufin fata zuwa tsaki na fata shiga 0px)
  • Arewa CSS na fill-opacity wanda ke tukaci girman zane-a-wane na rufin (sauki 1 - 0)
  • Arewa CSS na stroke-opacity wanda ke tukaci girman zane-a-wane na tsaki (sauki 1 - 0)

View Example

fimtarin kananan biruwa da zane-a-wane:

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

Code Explanation:

CSS opacity property defines the transparency value of the entire element (the valid range is: 0 - 1)

View Example

Final example, create a rectangle with rounded corners:

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

Code Explanation:

rx and ry attributes can make the rectangle rounded.

View Example