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 學習<一>