SVG <rect>

SVG ina elementi za muonekano zilizopangiwa na wakulima, ambazo wakulima waweza kutumia na kusaidia kwa ajili ya kusoma.

Muonekano wa SVG

SVG ina elementi za muonekano zilizopangiwa na wakulima, ambazo wakulima waweza kutumia na kusaidia kwa ajili ya kusoma:

  • Mraba <rect>
  • Kikombe <circle>
  • Mfano <ellipse>
  • Mabaya <line>
  • Mafupi <polyline>
  • Makutano <polygon>
  • Mwendo <path>

Kichaguo kidogo kina kumekuwa kueleza hizi elementi, kuanza na elementi ya mraba.

<rect> inatumika kwa kumengenia mraba

<rect> inatumika kwa kumengenia mraba, na varieti za mraba.

Kuonеза maana yake, kopia hii kodeni kwa msingi wa habari, hatauweze kuhifadhi kama faili "rect1.svg". Ingiza faili hii kwenye kikaa cha web:




<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:1;
stroke:rgb(0,0,0)"/>

代码解释：

  • Mfano wa width na height wa elementi rect inaeleza kipimo cha kipimo cha mraba na kipimo cha kipimo cha mraba
  • Mfano wa style inaeleza hatua ya CSS
  • Mfano wa fill wa CSS inaeleza rangi ya kumwenguni cha mraba ( thamani ya rgb, jina la rangi au thamani ya heshima)
  • Mfano wa stroke-width wa CSS inaeleza ukurungu wa kifungu cha mraba
  • Mfano wa stroke wa CSS inaeleza rangi ya kifungu cha mraba

Angalia mafano hii

Tunapokea mafano mengine ya kina mpya:




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

Mfano wa kueleza:

  • Kina ya x inaeleza eneo la kimo la kushoto cha mraba (mfano, x="0" inaeleza ukurungu wa mraba hadi kati ya kushoto cha mifungo ni 0px)
  • Kina ya y inaeleza eneo la kimo cha kati ya mraba (mfano, y="0" inaeleza ukurungu wa mraba hadi kati ya eneo la mifungo ni 0px)
  • Mfano wa fill-opacity wa CSS inaeleza ujuzi wa rangi wa mawili wa mawili (mwisho ni: 0 - 1)
  • Mfano wa stroke-opacity wa CSS inaeleza ujuzi wa rangi wa mawili (mwisho ni: 0 - 1)

查看例子

inaa ya kweli elementi




<rect x="20" y="20" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
opacity:0.9"/>

代码解释：

CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）

查看例子

最后的例子，创建带有圆角的矩形：

代码解释：

rx 和 ry 属性可使矩形产生圆角。

查看例子