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