Basic Shapes

如果沒有對單位進行特別說明的話，不論你設置的是位置還是尺寸大小的值，單位都是一樣的，默認是px。

矩形 (rect)

矩形就是指正方形或是長方形。

• id　該形狀的名稱。
• X　矩形的左上角的x座標。
• Y　矩形的左上角的Y座標。
• fill　填充顏色。
• stroke　線段顏
• stroke-width　線段寬度。
• width　矩形的寬度。
• height　矩形的高度。

<rect id="A" x="33" y="34" fill="#FF6CC4" stroke="#C30D23"   
stroke-width="3" width="75" height="75"/>
<rect id="B" x="119" y="54" fill="#6EA9FF" stroke="#036EB7"   
stroke-width="3" width="117" height="55"/>

圓角矩形 (rect)

如果是使用 Illustrator 存出的 SVG，圓角矩形會被轉換為path。

• rx　圓角x半徑。
• ry　圓角y半徑。

<rect x="60" y="10" rx="10" ry="10" width="75" height="75"   
stroke="#FF5500" stroke-width="5" fill="#FFB255"/>

圓形 (circle)

如果省略cx 和cy，圓的中心會被設置為(0, 0)。

• cx　圓心的x坐標。
• cy　圓心的y坐標。
• r　圓的半徑。

<circle fill="#FF4343" stroke="#890000" stroke-width="5" cx="80.141" cy="73.446" r="44"/>

橢圓 (ellipse)

橢圓有不同的 x 和 y 半徑。

• rx　x方向的半徑。
• ry　y方向的半徑。

<ellipse fill="#77DD47" stroke="#246614" stroke-width="5" cx="100" cy="75" rx="67" ry="44"/>

多邊形 (polygon)

多邊形使用逗號來分隔每一組坐標點。

• points　幾個點。

<polygon fill="#D271FF" points="100,56 62,107 37,49"/>
<polygon fill="#68EADD" points="151,39 163,63 189,66 170,85 175,111 151,99 127,111 132,85 
                                113,66 139,63 "/>
<polygon fill="#FF7900" points="219,110 206,70 240,46 274,70 261,110 "/>

線條 (line)

• x1　直線起點的x坐標。
• y1　直線起點的y坐標。
• x2　直線終點的x坐標。
• y2　直線終點的y坐標。

<svg width ="300px" height = "250px" > 
  <line x1="100" y1="200" x2="250" y2="50" stroke="#000" stroke-width="5" /> 
</svg >

折線 (polyline)

每個點都必須包含兩個數字，其x坐標和y坐標。

<svg width="300px" height = "300px" > 
  <polyline points="10 10, 50 50, 75 175, 175 150, 175 50, 225 75, 225 150, 300 150"  
  fill="none" stroke="#000" /> 
</svg >