SVG 學習<二>進階 SVG世界，視野，視窗 stroke屬性 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的視窗，視野和全局（世界）

SVG全局（世界）是無窮大的（SVG的全局並不侷限於html的範圍）；

例：

    <svg width="100%" height="100%" style="border: solid 1px red;">
        <circle cx="100" cy="100" fill="green" r="200" />
    </svg>

上述代碼繪製了一個半徑爲200px的圓，圓心座標爲100 * 100，SVG標籤（視窗）佔滿整個瀏覽器。但從下圖中能夠看到圓形仍是有一部分在屏幕以外，因此SVG的全局（世界）是無窮大且不受任何元素的影響。

SVG的視野（viewbox）是觀察全局（世界）的一個矩形區域，可定義。

例：

    <svg width="500px" height="400px" viewbox="-15 -20 80 80" style="border: solid 1px red;display: block;margin-left:200px;">
        <circle cx="0" cy="0" fill="green" r="20" />
    </svg>

經過viewbox屬性來調整SVG視野；

viewbox=" x y width height "   x:左上角橫座標，y:左上角縱座標，width:寬度，height:高度；

viewbox的參數能夠本身動手作幾個demo體會這些參數的做用；

SVG標籤的 width height可自定義大小，這就是SVG的視窗。SVG視窗能夠理解爲在頁面中定義一片區域用來渲染SVG元素。

例：

    <svg width="500px" height="400px" style="border: solid 1px red;display: block;margin-left:200px;">
        <circle cx="100" cy="100" fill="green" r="200" />
    </svg>

一樣仍是剛纔那個圓，如今將SVG標籤的左邊距調整200像素。發現圓心相對於SVG視窗的位置沒變，但相對於屏幕左上角的位置變了。因此說SVG視窗是頁面中用來渲染SVG元素的。

小結：SVG全局（世界）能夠理解爲景，SVG視野能夠理解爲相片視野，SVG視窗能夠理解爲相片自己。

 

SVG分組——g標籤

g標籤在svg標籤內使用，功能用來對圖形，文字，線段進行分組。

分組能夠對一組SVG元素統一調整 填充色，筆觸色，座標等屬性。

g標籤下全部子標籤都將繼承g標籤的屬性；

g標籤可嵌套使用；

可經過定義transform屬性改變座標；

HTML代碼

    <svg class="svg">
        <g class="g_1">
            <rect x="20" y="20"/><rect x="240" y="20" />
        </g>
        <g class="g_2">
            <circle cx="100" cy="200" /><circle cx="220" cy="200" />
        </g>
    </svg>

CSS代碼

.g_1{
    stroke:rgb(0,0,0);
    stroke-width:2px;
    fill:rgb(0,255,255);
}
rect{ width:200px; height:100px; }
.g_2{
    stroke:rgb(220,17,20);
    stroke-width:2px;
    fill:rgb(255,255,255);
}
circle{ r:50px; }

g標籤能夠對一組圖形，文字或線段的筆觸色，填充色，筆觸寬度進行統必定義

  

SVG超連接——圖形，線段也能連接

HTML代碼

    <svg class="svg">
        <a xlink:href="http://www.baidu.com" target="_blank">
            <circle class="circle" />    
        </a>
    </svg>

CSS代碼

.circle{ cx:100px;cy:100px;fill:rgb(0,0,255);stroke-width:6;stroke:rgb(0,255,0);r:80px; }

svg標籤中可加入a標籤，但href屬性前必須加上xlink，svg是xhtml元素超連接必須加上xlink。

同理，svg中的a標籤能夠包含任何svg元素。

 

SVG的stroke屬性（SVG的畫筆）

stroke ： 定義筆觸顏色；

stroke-width ： 定義筆觸寬度；

stroke-linecap ： 定義線段兩端樣式；

stroke-dasharray ： 定義虛線樣式；

HTML代碼

    <svg class="svg">
        <g fill="none">
            <line stroke="rgb(255,0,0)" stroke-width="5" x1="2" y1="5" x2="202" y2="5"/>
            <line stroke="rgb(0,255,0)" stroke-width="10" x1="2" y1="25" x2="202" y2="25"/>
            <line stroke="rgb(0,0,255)" stroke-width="15" x1="2" y1="55" x2="202" y2="55"/>
        </g>
    </svg>

HTML代碼

    <svg class="svg">
        <g fill="none" stroke="rgb(0,255,221)" stroke-width="50">
            <line stroke-linecap="butt" x1="50" y1="50" x2="552" y2="50"/>
            <line stroke-linecap="round" x1="50" y1="150" x2="552" y2="150"/>
            <line stroke-linecap="square" x1="50" y1="250" x2="552" y2="250"/>
        </g>
    </svg>

HTML代碼

    <svg class="svg">
        <g fill="none" stroke="rgb(0,255,221)" stroke-width="10">
            <line stroke-dasharray="2,2" x1="50" y1="50" x2="552" y2="50"/>
            <line stroke-dasharray="20,20" x1="50" y1="150" x2="552" y2="150"/>
            <line stroke-dasharray="20,10,30,10,20,30" x1="50" y1="250" x2="552" y2="250"/>
            <line stroke-dasharray="5,20,10,20,15,20,20,20,25,20,30,20,35" x1="50" y1="350" x2="552" y2="350"/>
        </g>
    </svg>

 

stroke-dasharray定義虛線方式，建議值爲規律性數列。