深入淺析HTML5中的SVG

2020-03-24 16:27:54

字體：大中小

來源：轉載

供稿：網友

SVG 背景SVG是Scalable Vector Graphics的縮寫，意為可縮放矢量圖形。1998年，萬維網聯盟成立了一個工作組，研發一種通過XML來表現矢量圖形的技術 SVG！由于SVG也是一種XML文件，所以SVG也繼承了XML的開放性、可移植性和交互性的優點。如今幾乎所有主流的瀏覽器都支持SVG，大家可以從這里得到更多的兼容信息，其中包括：使用 embed 或者 object 元素來顯示基本的SVG圖形；
使用 img 來顯示SVG圖形；
將SVG圖形應用為CSS背景圖；
直接在HTML文檔中使用 svg 標簽（需要HTML5支持）；
對使用CSS或者外部對象元素的html' target='_blank'>HTML元素使用SVG變換、濾鏡等特效；
對SVG對象使用類似photoshop的效果，包括模糊和色彩處理；
對SVG圖像使用動畫；
使用SVG格式的字體；* SVG
* 基本內容
* SVG并不屬于HTML5專有內容
* HTML5提供有關SVG原生的內容
* 在HTML5出現之前,就有SVG內容
* SVG,簡單來說就是矢量圖
* SVG文件的擴展名為 .svg
* SVG使用的是XML語法
* 概念
* SVG是一種使用XML技術描述二維圖形的語言
* SVG的特點
* SVG繪制圖形可以被搜索引擎抓取
* SVG在圖片質量不下降的情況下,被放大
* SVG與Canvas的區別
* SVG
* 不依賴分辨率
* 支持事件綁定
* 大型渲染區域的程序(例如百度地圖)
* 不能用來實現網頁游戲
* Canvas
* 依賴分辨率
* 不支持事件綁定
* 最合適網頁游戲
* 保存為 .jpg 格式的圖片
* 用途
* 網頁中一些小的圖標
* 網頁中動態特效(動畫效果)
* HTML5中使用SVG
* 使用 svg /svg 元素
* 作用 - 類似于 canvas 元素
* 默認大小為300px*150px
* 使用CSS樣式
* 使用SVG繪制圖形,必須定義 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
!--
繪制矩形 - 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" /
/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
* 扇形(射線)漸變 - radialGradient
* 濾鏡 - 高斯模糊
* 濾鏡使用 filter 元素
* feGaussianBlur 元素 - 高斯模糊
* in= SourceGraphic
* stdDeviation - 設置模糊程度
復制代碼代碼如下:
body
svg width="500px" height="500px"
!--
如何設置高斯模糊濾鏡
* 定義 defs /defs 元素 - 濾鏡定義在該元素中
* 定義 filter /filter 元素 - 表示SVG的濾鏡
* 定義高斯模糊元素 feGaussianBlur
* 屬性
* in="SourceGraphic" - 固定寫法
* stdDeviation - 設置模糊程度
* 為 filter 元素定義id屬性值
* 方便添加在繪制圖形的元素中
--
defs
filter id="myfilter"
feGaussianBlur in="SourceGraphic" stdDeviation=5 /
/filter
/defs
!--
如何將上面的高斯模糊與下面的元素進行關聯
* 使用filter屬性,值為url(#id)
* 設置當前圖形的濾鏡
--
rect x="100" y="100" width="100" height="100" filter="url(#myfilter)" fill="green" /
/svg
/body
* 注意 - 定義在 defs 元素中
* TWO.js
* 基本內容
* JS庫介紹
* three.js - 專門用于繪制三維圖形
* two.js - 專門用于繪制二維圖形
* two.js支持的格式
* SVG - 默認
* Canvas
* WebGL - 專門用于繪制圖像
* 如何使用two.js
* 在HTML頁面中引入two.js文件
* 在HTML頁面中定義容器( div )
* 在javascript代碼中
* 獲取HTML頁面中的容器
* 創建Two對象,將該對象添加到容器中
new Two(params).appendTo(Element);
* 使用two.js提供的API方法進行繪制
* 利用two.js提供的方法,設置圖形
* 利用update()方法進行繪制
* 創建Two對象
* 構造器 - new Two(params)
* params參數 - 設置當前對象的信息
* type - 設置當前使用的格式(Two.Types.svg)
* svg - 默認值
* canvas
* webgl
* width和height - 設置寬度和高度
* fullscreen - 設置是否全屏
* Boolean值,true表示全屏
* 圖形方法
* makeLine() - 繪制線條
* makeRectangle() - 繪制矩形
* makeCircle() - 繪制圓形
* makeEllipse() - 繪制橢圓
* 動畫方法
* update() - 更新動畫
* play() - 添加動畫(循環)
* pause() - 刪除動畫
* 設置繪制圖形的樣式
* 調用Two對象的繪制方法繪制圖形時,返回該圖形對象
* 通過該圖形對象,設置相關屬性值
* 分組操作
* Two.Group
* 動畫效果
* bind(event,callback)方法 - 事件綁定
* event - 綁定事件名稱
* update - 對應update()方法的作用
* 所有的DOM事件都可以綁定
* callback - 事件處理函數
* 擴展內容
* 前端開發工具
* Aptana Studio 3 - 代碼提示
* Webstrom - 國內前端開發人員神器
* 實際開發中
* 多用SVG
* 不失真
* 可被搜索
* 頁面優化 - 減少外部鏈接
* a href=
* img src=
* Canvas - HTML繪制圖形
* 實際運行中,是以圖片方式出現(.png)
* 不能被搜索引擎抓取
* 放大后失真
* SVG內容
* 內容量非常大
* 靜態繪制圖形
* 動態動畫效果
* 專門提供事件
* 網上關于SVG的資料很少(沒有書籍)
* SVG的規范(W3C英文)
* SVG或CANVAS在HTML頁面中定義
* 是只能定義一個元素,還是可以定義多個元素?
* 在一個HTML頁面可以定義多個 svg 或 canvas 元素
* SVG還是CANVAS都是允許同時定義(繪制)多個圖形
* 在實際開發中的使用
* SVG在將來的工作開發,使用率并不高
* SVG圖片一般都是由UI設計師來完成
* SVG即使是我們自己來設計(繪制)
* 目前網絡上很多專門提供現成的SVG圖片的網站
* 使用JS庫------------------------------------------------------------------------------------ 為了生活而改變，為了改變而創造.html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：html中有關meta標簽的用法詳解

下一篇：HTML5 本地存儲和內容按需加載的思路和方法