一、 SVG — 可縮放矢量圖形
1、 什么是SVG
SVG是一種使用XML技術描述二維圖形的語言,svg是一種矢量圖
并不屬于HTML5專有內容，在HTML5出現之前，就有SVG內容，HTML5只不過提供了SVG原生的內容
svg文件的擴展名為.svg
2、 SVG的優勢
- 可通過文本編輯器來創建和修改
- 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
- SVG可在任何的分辨率下被高質量的打印
- 可在圖片質量不下降的情況下被放大
- SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
- 支持事件綁定
- SVG 可以與 Java 技術一起運行
- SVG 是開放的標準
- SVG 文件是純粹的 XML
3、 SVG與canvas的區別
-
SVG - 實際開發中，多用SVG
不依賴分辨率 支持事件處理器 不適合游戲 大型渲染區域的程序(例如，百度地圖) -
Canvas
依賴分辨率 不支持事件綁定 最適合網頁游戲 可以用圖片格式保存圖像
不是是SVG還是Canvas，在一個頁面中都可以同時定義多個
4、用途
靜態繪制圖形
動態動畫效果
專門提供事件
二、SVG — 繪制圖形
1、創建SVG元素 <svg> </svg>
類似于canvas元素，可在元素內寫 width=" " height=" "
但可以使用css樣式
使用svg繪制圖形，必須定義在svg元素中
2、畫矩形 —— 創建矩形元素
<rect x="100" y="100" width="200" height="150" fill="blue" stroke="red" stroke-width="5"> </rect>
如果使用style屬性來設置他的樣式，例如設置背景顏色style="background:red"是不行的，要使用style="fill:red"
3、畫圓形 —— 創建圓形元素
<circle cx="50" cy="50" r="50"></circle>
4、畫橢圓形 —— 創建橢圓元素
<ellipse cx="" cy="" rx="" ry="">
cx 屬性定義原點的 x 坐標
cy 屬性定義原點的 y 坐標
rx 屬性定義水平半徑
ry 屬性定義垂直半徑
ry = rx 畫出來的就是一個圓
5、 畫直線 —— 創建直線元素
顏色必須得加
<line x1=" " y1=" " x2=" " y2=" " stroke-width=" " stroke=" ">
填上對應的數值
6、 畫折線 —— 創建折線元素
points - 設置起點 折點及重點，x和y用逗號分隔，多個折點用空格隔開
會默認將折線中的區域(起點到終點)，默認提供黑色,將fill設置為canvas的顏色，將stroke設置為另一種顏色
<polyline points=" " stroke=" " fill=" "></polyline> //最后的連接點無法完整的連接
7、 畫多邊形 —— 多邊形元素
//不用考慮折點的顯示問題
<polygon points="">
*例子 *
<svg id="" style="width:400px;height:400px;background-color:yellow;">
<rect x="150" y="150" width="100" height="100" fill="red" stroke="black" stroke-width="5px"></rect>
<circle cx="80" cy="80" r="50" fill="red"></circle>
<ellipse cx="90" cy="300" rx="90" ry="50"></ellipse>
<line x1="10" y1="10" x2="200" y2="200" stroke-width="2" stroke="white" ></line>
<polyline points="100,20 300,70 200,300 100,20" stroke="#e4393c" fill="yellow"></polyline>
<!-- line只能設置一次 -->
<!--<line x1="280" y1="200" x2="300" y2="100" stroke-width="2" stroke="white">-->
</svg>
<script type="text/javascript">
var rect=document.querySelector("svg rect");
//無法通過js修改屬性
console.info(rect.width);
</script>
三、SVG — 漸變
1、 線性漸變步驟
-
首先在html里面創建SVG元素
<svg></svg> -
然后在svg里追加defs元素
<svg> <defs></defs> </svg> -
在defs里追加linearGradient元素，他才是真正實現漸變的元素
<svg> <defs> <linearGradient x1="" y1="" x2="" y2=""></linearGradient> </defs> </svg> //x1、y1:起點坐標值 //x2、y2:終點坐標值 //注意： 這四個值都是百分比 -
在linearGradient里面追加stop元素，stop元素真正設置漸變顏色
<svg> <defs> <linearGradient> <stop offset="" stop-color="" stop-opacity=""> <stop offset="" stop-color=""> </linearGradient> </defs> </svg> // offset: 值為百分比 // stop-color:設置漸變顏色 // stop-opacity:設置漸變顏色的透明度 -
在defs下面追加<rect>,畫出圖形,并將上面設置的線性漸變，添加到矩形中
//使用fill屬性，值為url(#漸變元素的id值) <rect x="0" y="0" width="400" height="400" fill="url(#def)">
2、 扇形漸變radialGradient，參考線性漸變
四、SVG — 高斯模糊效果
看下面代碼
<svg width="500" height="500">
<defs>
<filter id="Gaussian_Blur">
//fegaussianblur- 高斯模糊,stdDeviation - 設置模糊程度
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<rect x="0" y="0" width="400" height="400" filter="url(#def)">
</svg>
<!-- 濾鏡使用filter元素
in="SourceGraphic" - 固定寫法
-->
效果
- 更改 stdDeviation元素的值，會產生相應的效果
- 設置為負數 無效 會默認為 0
- 可以試試不斷增加 stdDeviation元素的值，看它怎么變化的
