SVG 學習<一>
阿新 • • 發佈:2017-07-26
ble 坐標 pac code 屬性 ima city font 多邊形
svg標簽用來繪制sgv圖片(矢量圖);
svg和H5中的canvas類似,svg也可以繪制任意圖形或文字;
svg標簽默認大小為 300 * 150,svg也可設置css樣式任意定義大小,顏色,邊框,背景色等等;
註:svg默認為行級標簽
繪制svg圖形僅僅能在svg標簽內顯示,超出部分不會被顯示;
舉個例子,若svg為300 * 150,rect則為 600 * 300那麽矩形只會顯示300 * 150的大小
矩形
HTML代碼
<svg class="svg"> <rect class="rect" /> </svg>
rect 繪制矩形
CSS代碼
.rect{ width:200px; height:200px; x:20px; /*x軸距*/ y:30px; /*y軸距*/ /*x,y皆以SVG左上角點為起始 及 svg左上角點左邊為0,0*/ fill:rgb(0,0,255); /*填充色(同背景色)*/ stroke-width:6; /*筆觸寬度(邊框寬度)*/ stroke:rgb(0,255,0); /*筆觸顏色(邊框顏色)*/ fill-opacity:.8; /*填充色透明度(背景透明度)*/ stroke-opacity:.5; /*筆觸透明度(邊框透明度)*/ rx:20px; /*x軸弧度*/ ry:50px; /*y軸弧度*/ }
圓形
HTML代碼
<svg class="svg"> <circle class="circle" /> </svg>
circle繪制圓形
css代碼
.circle{ cx:100px; /*圓心x軸距*/ cy:100px; /*圓心y軸距*/ fill:rgb(0,0,255); /*填充色(同背景色)*/ stroke-width:6; /*筆觸寬度(邊框寬度)*/ stroke:rgb(0,255,0); /*筆觸顏色(邊框顏色)*/ r:80px; /*半徑*/ }
橢圓
HTML代碼
<svg class="svg"> <ellipse class="ellipse" /> </svg>
ellipse繪制圓形
CSS代碼
.ellipse{ cx:300px; /*圓心x軸距*/ cy:150px; /*圓心y軸距*/ rx:200px; /*x軸半徑*/ ry:100px; /*y軸半徑*/ fill:rgb(0,0,255); /*填充色(同背景色)*/ stroke-width:6; /*筆觸寬度(邊框寬度)*/ stroke:rgb(0,255,0); /*筆觸顏色(邊框顏色)*/ }
直線
HTML代碼
<svg class="svg"> <line x1="2" y1="5" x2="90" y2="180" class="line" /> </svg>
line繪制直線,x1 y1直線起點坐標, x2 y2 直線終點坐標,註意,x1 y1 x2 y2是標簽屬性,且不可在css中生效。
CSS代碼
.line{ stroke-width:2; /*筆觸寬度(直線寬度)*/ stroke:rgb(0,255,0); /*筆觸顏色(直線顏色)*/ }
多邊形
HTML代碼
<svg class="svg"> <polygon points="100,10 40,180 190,60 10,60 160,180" class="polygon" /> </svg>
polygon表示對變形
CSS代碼
.polygon{ stroke-width:2; /*筆觸寬度(邊框寬度)*/ stroke:rgb(0,255,0); /*筆觸顏色(邊框顏色)*/ fill:rgb(255,0,255); /*填充色(同背景色)*/ fill-rule:evenodd; /*填充規則*/ }
fill-rule為填充色規則,evenodd 類似table的隔行變色。
待續。。。。。。
SVG 學習<一>