SVG 學習<一>基礎圖形及線段

目錄

SVG 學習<一>基礎圖形及線段

SVG 學習<二>進階 SVG世界，視野，視窗 stroke屬性 svg分組

SVG 學習<三>漸變

SVG 學習<四> 基礎API

SVG 學習<五> SVG動畫

SVG 學習<六> SVG的transform

SVG 學習<七> SVG的路徑——path(1)直線命令、弧線命令

SVG 學習<八> SVG的路徑——path(2)貝塞爾曲線命令、光滑貝塞爾曲線命令

（轉）利用 SVG 和 CSS3 實現有趣的邊框動畫

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

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的隔行變色。

 

折線

HTML代碼

    <svg class="svg">
        <polyline points="100,10 40,180 190,60 10,60 160,180" class="polygon" />
    </svg>

CSS代碼

.polygon{
    stroke-width:2;        /*筆觸寬度(線段寬度)*/
    stroke:rgb(0,255,0);    /*筆觸顏色(線段顏色)*/
    fill:none;
}

折線和多邊形幾乎同樣，折線標籤是polyline 多邊形是polygon 。

本文介紹svg的幾個基本圖形和線段。下一篇介紹svg進階玩法。