HTML--SVG基礎

 一 SVG概述

 SVG是Scalable Vector Graphics的縮寫,即縮放式矢量圖形;

優點: 1.使用編輯器即可編輯圖形;
2.基於XML,SVG圖形可以被很容易的搜索,腳本化和壓縮;
3.縮放不影響圖形質量;
4.支持隨意打印成需要的尺寸;
5.SVG開源標准;

劣勢:
1.比正常格式圖片體積大;
2.即使小圖片也可能很大;

 

SVG繪制圓形--<circle />

circle:繪制圓形標簽;
cx/cy:定義圓形中心點;
r:定義圓形半徑;
stroke:定義描邊顏色;
stroke-Width:定義描邊寬度;
fill:定義內填充顏色;

<svg width="100" height="100">
    <circle cx="50" cy="50" r="45" stroke="orange" stroke-width="10" fill="#ff5" />
</svg>

 

 

二 SVG繪制矩形和圓角矩形--<rect />

rect:繪制矩形標簽;
x:矩形的左側位置,定義矩形到<svg>左側的距離是Xpx;
y:矩形的頂端位置,定義矩形到<svg>頂部的距離是Ypx;
rx/ry:是圓角半徑;
style:
fill:填充顏色;
fill-opacity:填充顏色透明度;
stroke:描邊顏色;
stroke-Width:描邊寬度;
stroke-opacity:描邊透明度;

<svg width="500" height="400">
    <rect x="10" y="10" width="300" height="150" style="fill:#ccc; stroke:orange; stroke-width:5px;" />
    <rect x="10" y="210" rx="50" ry="100" width="300" height="150" style="fill:#ccc; stroke:orange; stroke-width:5px; stroke-opacity:.5; fill-opacity:.9;"  />
</svg>

 

 三 繪制橢圓--<ellipse />

ellipse:繪制橢圓標簽;
cx:定義橢圓中心的X坐標;
cy:定義橢圓中心的Y坐標;
rx:定義橢圓的水平半徑;
ry:定義橢圓的垂直半徑;

<svg width="500" height="400">
    <ellipse cx="150" cy="100" rx="90" ry="50" stroke="orange" stroke-width="5" fill="#000" fill-opacity=".5" />
    <text x="110" y="30" font-size="24" font-weight="bold">SVG橢圓</text>
</svg>

 

 

四 SVG繪制直線--<line />

line:繪制直線標簽;

x1:直線起始點X坐標;

y1:直線起始點Y坐標;

x2:直線終止點X坐標;

y2:直線終止點Y坐標;

<svg width="500" height="400">
    <line x1="5" y1="5" x2="250" y2="200" style="stroke:rgba(255, 0, 0, .5); stroke-width:5px;" />
    <text x="120" y="50" font-size="24" font-weight="bold">SVG直線</text>
</svg>

 

 

 五 SVG繪制多邊形--<polygon />

polygon:繪制多邊形標簽;
points:定義多邊形每個頂點的X坐標和Y坐標;

<svg width="500" height="400">
    <polygon points="150, 75 258, 137.5 258, 262.5 150, 325 42, 262.6 42, 137.5" stroke="orange" stroke-width="5" stroke-opacity=".5" fill="rgba(250, 0, 0, .3)" />
    <text x="95" y="50" font-size="24" font-weight="bold">SVG多邊形</text>
</svg>

 

六 SVG繪制折線--<polyline />

polyline:繪制折線標簽;

points:定義折線的各個轉折點的X坐標和Y坐標;

<svg width="500" height="400">
    <polyline points="150,75 258,137.5 258,262.5 150,325 42,262.6 42,137.5" stroke="orange" stroke-width="5" fill="none"/>
    <text x="103" y="50" font-size="24" font-weight="bold">SVG折線</text>
</svg>

 

七 SVG繪制路徑--<path />

// 路徑繪制(Path)是SVG圖形繪制中比較強大的元素;

path:繪制路徑標簽;
相關d屬性的說明:
M = Moveto(移動到坐標);
L = Lineto(繪制直線到坐標);
H = Horizontal lineto(繪制水平直線到坐標);
V = vertical lineto(繪制垂直直線到坐標);
C = Curveto(繪制曲線到坐標);
S = Smooth curveto(繪制光滑曲線到坐標);
Q = Quadratic Bezier curve(繪制貝塞爾曲線到坐標);
T = smooth quadratic Bezier curveto(繪制光滑貝塞爾曲線到坐標);
A = elliptical Arc(繪制橢圓弧到坐標);
Z = closepath(閉合路徑);

<svg width="500" height="400">
    <path d="M 100 100 L 300 100 L 200 300 z" style="fill:orange; stroke:#666; stroke-width:5px;" />
    <text x="150" y="80" font-size="24" font-weight="bold">SVG路徑</text>
</svg>

 

八 SVG生成文字--<text></text>

text:繪制文字標簽;

x:文字的X坐標;

y:文字的Y坐標;

dx:X軸偏移坐標;

dy:Y軸偏移坐標;

rotate:所有文字旋轉角度;

textlength:渲染的文字所占據長度(可用來設置文字間距);

lengthAdjust:使用何種方式來渲染文字占據長度;

<svg width="500" height="400">
    <text x="170" y="80" font-size="24" font-weight="bold">SVG文字</text>
    <text x="130" y="120" rotate=" 45" textlength="150" font-size="20" font-weight="bold">文字旋轉45度</text>
    <a href="http://www.cnblogs.com/yizihan">
        <text x="30" y="180" fill="orange" textlength="350" font-size="20" font-weight="bold">
            http://www.cnblogs.com/yizihan
        </text>
    </a>
</svg>

 

九 SVG繪制描邊--stroke

g:代表一組;

path:繪制路徑;

stroke-width:設置描邊粗細;

stroke-linecap:設置描邊的末端樣式;

stroke-dasharray:設置虛線的格式(虛線段的長度);

<svg width="500" height="400">
    <g>
        <text x="30" y="30" font-size="20" font-weight="bold">stroke例子</text>
        <path stroke="orange" stroke-width="10" d="M 50 50 L 300 50" />
    </g>
    <g>
        <text x="30" y="130" font-size="20" font-weight="bold">stroke linecap</text>
        <path stroke="orange" stroke-linecap="butt" stroke-width="10" d="M 50 150 L 300 150" />
        <path stroke="orange" stroke-linecap="round" stroke-width="10" d="M 50 180 L 300 180" />
        <path stroke="orange" stroke-linecap="square" stroke-width="10" d="M 50 210 L 300 210" />
    </g>
    <g>
        <text x="30" y="280" font-size="20" font-weight="bold">stroke dasharray</text>            
        <path stroke="orange" stroke-dasharray="5, 5" stroke-width="10" d="M 50 300 L 300 300" />
        <path stroke="orange" stroke-dasharray="15, 15" stroke-width="10" d="M 50 330 L 300 330" />
        <path stroke="orange" stroke-dasharray="55, 55" stroke-width="10" d="M 50 360 L 300 360" />
    </g>
</svg>

 

十 SVG生成濾鏡效果

// 先定義濾鏡
<defs>
    <filter id="myfilter" x="0" y="0" >
    // <filter>標簽里的id屬性可以為濾鏡定義一個唯一的名稱;
        <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
        // 濾鏡效果是通過<feGaussianBlur>標簽進行定義的,--高斯模糊;;fe后綴可用於所有的濾鏡;
        // <feGaussianBlur>標簽的stdDeviation屬性可定義模糊的程度;
        // in="SourceGraphic"這個部分定義了由整個圖像創建效果;
    </filter>
</defs>
// 應用濾鏡到圖形
<rect x="30" y="30" width="200" height="100" stroke="green" stroke-width="10" fill="orange" filter="url(#myfilter)" />
// filter:url屬性用來把元素鏈接到濾鏡;當鏈接濾鏡id時,必須使用#字符;

 

十一 SVG生成圖案填充效果

<defs>
    <pattern id="mypattern" patternUnits="userSpaceOnUse" x="10" y="10" width="100" height="100">
    // patternUnits:用來定義圖案使用的單位;
        <path d="M 0 0 L 100 0 L 50 100 z" fill="#222" stroke="orange" stroke-width="5"  />  
        // 繪制一個倒三角; 
    </pattern>
</defs>
// 應用圖案到具體圖形;
<rect x="10" y="10" width="300" height="200" stroke="green" stroke-width="5" fill="url(#mypattern)" />

 

十二 SVG生成漸變效果

<svg width="500" height="400">
    // 定義線性漸變
    <defs>
        <linearGradient id="linearGradient">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100" stop-color="#f60" />
        </linearGradient>
    </defs>
    // 應用線性漸變
    <rect x="10" y="10" width="300" height="100" stroke="orange" stroke-width="5" fill="url(#linearGradient)" />

    // 定義徑向漸變
    <defs>
        <radialGradient id="radialGradient">
            <stop offset="0%" stop-color="#f00" />
            <stop offset="100%" stop-color="#f60" />
        </radialGradient>
    </defs>
    // 應用徑向漸變
    <rect x="10" y="150" width="100" height="100" stroke="orange" stroke-width="5" fill="url(#radialGradient)" />
</svg>

 

十三 JavaScript添加互動操作到SVG圖形

// 定義矩形
<svg width="500" height="400">
    <rect id="myrect" x="50" y="50" width="200" height="200" fill="orange" onClick="showcolor()" />
</svg>
<script>
// 針對SVG圖形定義JS方法;
function showcolor(){
    var color = document.getElementById('myrect').getAttributeNS(null,'fill');
    // getAttributeNS():通過命名空間URI和名稱來獲取屬性值;
    alert('矩形填充色為:' + color);
}
</script>

 

十四 SVG圖形中添加超鏈接

語法:

<a

    xlink:show ="new" | "replace"

    xlink:actuate = "onRequest" 

    xlink:href="<IRI>"

    target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>">

</a>

<svg width="500" height="400">
    <a xlink:href="http://www.cnblogs.com/yizihan/" >
        <rect x="10" y="10" width="200" height="200" style="fill:orange; stroke-width:5; stroke:rgb(222, 0, 0)" />   
    </a>
</svg>