SVG是Scalable Vector Graphics的縮寫，意為可縮放矢量圖形。1998年，萬維網(wǎng)聯(lián)盟成立了一個工作組，研發(fā)一種通過XML來表現(xiàn)矢量圖形的技術(shù)——SVG！由于SVG也是一種XML文件，所以SVG也繼承了XML的開放性、可移植性和交互性的優(yōu)點。如今幾乎所有主流的瀏覽器都支持SVG，大家可以從 這里 得到更多的兼容信息，其中包括：
<rect x="" y="" width="" height="" />
<!DOCTYPE html>
<html>
<head>
<title>SVG繪制矩形</title>
<meta charset="utf-8" />
</head>
<body>
<!--
在HTML頁面中使用svg標(biāo)簽的話
* 定義<svg></svg>元素
* 類似于<canvas>元素的作用
* 默認(rèn)大小 300px * 150px
* 設(shè)置寬度和高度 - 屬性和style
* 利用svg繪制所有圖形,必須定義在<svg>元素內(nèi)
* 利用svg繪制的圖形是與HTML頁面有關(guān)的
-->
<svg style="background:pink;width:400px;height:400px;">
<!--
繪制矩形 - <rect />
* x和y - 繪制矩形的左上角坐標(biāo)值
* width和height - 繪制矩形的寬度和高度
* 必須使用屬性方式,不能使用style樣式方式
* 默認(rèn)顏色為黑色
設(shè)置顏色 - 既可以使用屬性,還可以使用樣式
* fill - 設(shè)置填充顏色
* stroke - 設(shè)置描邊顏色
設(shè)置線條寬度
* stroke-width
注意
* svg繪制的圖形,使用style方式設(shè)置樣式,使用的不是CSS屬性,而是SVG屬性
-->
<rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" />
<rect x="120" y="10" width="100" height="100" style="fill:blue;stroke:black;stroke-width:5" />
</svg>
</body>
</html>
* 圓形元素
<circle cx="" cy="" r="" />
<body>
<svg width="500px" height="500px">
<!--
繪制圓形 - <circle>
* cx和cy - 圓形的圓形坐標(biāo)值
* r - 圓形的半徑
-->
<circle cx="100" cy="100" r="100" fill="pink" />
</svg>
</body>
* 橢圓元素
<ellipse cx="" cy="" rx="" ry="">
<body>
<svg width="300px" height="300px">
<ellipse cx="150" cy="150" rx="150" ry="100" />
</svg>
</body>
* 直線元素
<line x1="" y1="" x2="" y2="" />
<body>
<!--
<svg>元素中只能包含一個圖形元素,還是可以包含多個圖形元素?
* 可以包含多個圖形元素
-->
<svg width="300px" height="300px">
<line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/>
<line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/>
</svg>
</body>
* 折線元素
<polyline points="">
<body>
<svg width="500px" height="500px">
<!--
<polyline>元素 - 折線
* points - 設(shè)置起點、折點及終點
* x和y之間使用","分隔
* 多個點之間使用空格分隔
折線的特點
* 默認(rèn)將折線中的區(qū)域(起點到終點),默認(rèn)提供黑色
-->
<polyline points="10,10 200,10 200,200 10,200 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
</body>
* 多邊形元素
<polygon points="" />
<body>
<svg width="500px" height="500px">
<polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/>
</svg>
</body>
* 特效元素
* 漸變 - 漸變元素定義在<defs>元素內(nèi)
* 線型漸變 - <linearGradient>
* 該元素是起始元素
<linearGradient x1="%" y1="%" x2="%" y2="%">
<stop offset="%" stop-color="color" />
</linearGradient>
<body>
<svg width="400px" height="400px">
<!--
設(shè)置線型漸變 - <linearGradient>
* 用法 - 將漸變定義在<defs>元素中
* 特點 - 具有基準(zhǔn)線
* 起點坐標(biāo)值 - x1和y1
* 終點坐標(biāo)值 - x2和y2
* 注意
* 該元素是起始元素
<linearGradient></linearGradient>
* x1和y1、x2和y2的值都是百分值
* 定義id屬性
* 用于將設(shè)置的漸變添加到繪制的圖形元素中
* 使用<stop>元素 - 設(shè)置漸變的顏色
* offset - 設(shè)置漸變顏色的位置
* 該值也是百分值
* stop-color - 設(shè)置漸變顏色
* stop-opacity - 設(shè)置漸變顏色的透明度
-->
<defs>
<linearGradient id="mygrd" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="0" stop-color="red" />
<stop offset="50%" stop-color="green" />
<stop offset="100%" stop-color="blue" />
</linearGradient>
</defs>
<!--
如何可以將上面設(shè)置線型漸變,添加在下面的矩形中?
* 使用fill屬性,值為url(#漸變元素的id值)
-->
<rect x="0" y="0" width="400" height="400" fill="url(#mygrd)" />
</svg>
</body>
------------------------------------------------------------------------------------>為了生活而改變，為了改變而創(chuàng)造.
