利用svg標(biāo)簽繪制矩形、圓、橢圓

學(xué)習(xí)筆記：

1.矩形(rectangle)：

<rect/>

屬性：

width="數(shù)值" 定義矩形的寬度

x="數(shù)值"定義矩形的左邊位置

y="數(shù)值"定義矩形的右邊位置

height="數(shù)值" 定義矩形的高度

fill="顏色值" 定義矩形的填充顏色

fill-opacity="數(shù)值" 定義矩形填充顏色的透明度（0-1；值越小，越透明）

stroke-width="數(shù)值"定義矩形的邊框?qū)挾?/p>

stroke="顏色值" 定義矩形邊框的顏色

stroke-opacity="數(shù)值" 定義矩形邊框顏色的透明度（0-1；值越小，越透明）

opacity=''數(shù)值'' 設(shè)置整個元素的透明度，對圖形的填充顏色和邊框顏色同時生效（0-1；值越小，越透明）

rx="數(shù)值" ry="數(shù)值" 定義矩形的圓角分別在水平和垂直方向的半徑長度，rx=ry圓角為圓形，rx不等于ry圓角則為橢圓形

2.圓：<circle/>

屬性：

r="數(shù)值" 定義圓的半徑

cx="數(shù)值" 定義圓心的水平方向坐標(biāo)

cy="數(shù)值" 定義圓心的垂直方向坐標(biāo)

默認(rèn)圓心位置為（0，0）

3.橢圓：<ellipse/>

屬性：

cx="數(shù)值" 定義橢圓中心的水平方向坐標(biāo)

cy="數(shù)值" 定義橢圓中心的垂直方向坐標(biāo)

rx="數(shù)值" 定義橢圓的水平方向半徑

ry="數(shù)值" 定義橢圓的垂直方向半徑

橢圓的位置由cx、cy決定，大小由rx、ry決定。

注：stroke、stroke-width、fill這三個屬性，常見的圖形繪制都可以使用。