2014年10月24日 星期五

SVG 基礎

矩形使用 rect

可以設定的屬性有:

x: 起始點 x 軸的座標
y: 起始點 y 軸的座標
width: 矩形的寬度
height: 矩形的高度
rx: 圓角的 x 軸半徑
ry: 圓角的 y 軸半徑
transform: 矩形的變形效果

style 可以設定的值有

fill: 圖形內部的填滿顏色
fill-opacity: 圖形內部的不透明度值
stroke: 圖形的邊框顏色
stroke-width: 圖形的邊框寬度
opacity: 圖形的不透明度值


畫圓型的話使用 circle

cx: 圓形中心點 x 軸的座標
cy: 圓形中心點 y 軸的座標
r: 圓形的半徑
transform: 圓形的變形效果

橢圓形使用 ellipse

cx: 橢圓形中心點 x 軸的座標
cy: 橢圓形中心點 y 軸的座標
rx: 橢圓形的 x 軸半徑
ry: 橢圓形的 y 軸半徑
transform: 橢圓形的變形效果



直線的話用 line就好了

x1: 起始點 x 軸的座標
y1: 起始點 y 軸的座標
x2: 結束點 x 軸的座標
y2: 結束點 y 軸的座標
transform: 直線的變形效果




多邊形則是使用

points: 座標位置,x1,y1 x2,y2, x3,y3...
transform: 多邊形的變形效果




反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...