HTML5系列-SVG瞭解
咱們對svg進行初步瞭解javascript
1.介紹css
SVG是一種矢量圖格式。SVG是Scalable Vector Graphics三個單詞的首字母縮寫。Adobe Illustrator是專門編輯、製做矢量圖的軟件工具。SVG是Adobe Illustrator的主要製做目標。你能夠在輕鬆的網頁上使用漂亮的SVG圖，但SVG有不少的用法你可能還不知道。html
咱們經過AI能夠製做svg，製做的矢量圖在AI提供了直接生成svg文件的選擇項，還有編輯svg文件的選項功能。html5
3.兼容及相關java
ie9及其以上和其餘主流瀏覽器chrome
他是來自xml的擴展canvas
canvas只能經過js控制繪製，svg經過標籤繪製api
3.實用到html頁面瀏覽器
--1.建立svg文件，後綴名是.svg，保存成svg.svg框架
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> </svg>
其中
circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
是繪製處理，咱們看單詞應該是一個紅色圓形的繪製，半徑40，描邊寬度是2，和咱們的canvas的dom api差很少名字
--2.embed標籤引入外部svg文件
html結構以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<embed src="svg.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
</body>
<script type="text/javascript">
window.onload=function(){
};
</script>
</html>
這是html5提供的新標籤，做爲外部內容和插件引入處理。
--3.object標籤引入外部svg文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<object data="svg.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
</body>
<script type="text/javascript">
window.onload=function(){
};
</script>
</html>
object是之前就有的標籤，還能夠引入視頻，音頻等等文件。
--4.iframe標籤引入外部svg文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<iframe src="svg.svg" width="300" height="100">
</iframe>
</body>
<script type="text/javascript">
window.onload=function(){
};
</script>
</html>
浮動框架標籤之前咱們都是引入外部的html頁面，一樣能夠引入svg。
--5.html頁面內部寫svg標籤
<!<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
};
</script>
</html>
咱們最喜歡的方式，寫法確實不是很好，這樣就會和咱們的html標籤交錯。
--6.svg外部文件作圖片引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<img src="svg.svg" width="300" />
</body>
<script type="text/javascript">
window.onload=function(){
};
</script>
</html>
--7.svg外部文件作css背景引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
.svg{background: url('svg.svg') no-repeat center;height: 300px;width: 300px;
}
</style>
<title>demo</title>
</head>
<body>
<div class="svg"></div>
</body>
<script type="text/javascript">
window.onload=function(){
};
</script>
</html>
總結：
svg頁面能夠作背景圖
能夠充當圖片資源
能夠做爲外部對象被引用標籤引入
能夠在html頁面內部以標籤形式建立。
學習SVG的各類繪製標籤
1.一份demo演示程序
咱們都採用html頁面內標籤形式建立，比較符合咱們寫div時候的習慣，仍是運行上面的程序，在高級瀏覽器下預覽：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
};
</script>
</html>
顯示效果：
這種寫法和咱們書寫html幾乎沒有任何的區別，相對canvas要用js的繪製咱們理解更容易。
svg是一對閉合標籤，就是建立了繪製的舞臺畫布，
circle是繪製處理標籤，繪製圓形，裏面的屬性就是繪製的具體操做。
既然有繪製圓形，經過對canvas的瞭解就能夠想到對應存在：矩形，線，曲線，貝塞爾曲線等的繪製標籤。
2.利用js進行動態處理
咱們利用js對dom的操做，一樣給circle加入id，找到和進行處理：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa">
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
var aa=document.getElementById("aa");
aa.onclick=function(){
aa.setAttribute("stroke-width","5");
};
};
</script>
</html>
利用dom找到aa，而後點擊事件的處理修改繪製屬性，咱們發現變成了5，證實js+dom操做一樣適合對svg的處理。
3.繪製矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
var aa=document.getElementById("aa");
aa.onclick=function(){
aa.setAttribute("stroke-width","5");
};
};
</script>
</html>
繪製矩形就是rect標籤，預覽看演示就知道 x y width height style中的stroke等的用途了。
我認爲幾個注意地方：
1.標籤閉合，咱們demo是沒閉合的，這樣在繪製多個會出現問題
2.svg標籤的寬高屬性表示畫布大小，標籤閉合
4.繪製圓形
已經在上面涉及circle標籤訂義。
4.繪製橢圓
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd;
stroke:#aaa;stroke-width:2"/></ellipse>
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
var aa=document.getElementById("aa");
aa.onclick=function(){
aa.setAttribute("stroke-width","5");
};
};
</script>
</html>
使用ellipse標籤，cx cy標籤圓心，rx ry表示在水平和垂直的半徑
5.繪製線條
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd;
stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
var aa=document.getElementById("aa");
aa.onclick=function(){
aa.setAttribute("stroke-width","5");
};
};
</script>
</html>
使用line標籤，其實座標配對實現
6.繪製多邊形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd;
stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/></polygon>
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
var aa=document.getElementById("aa");
aa.onclick=function(){
aa.setAttribute("stroke-width","5");
};
};
</script>
</html>
使用polygon標籤，在 points裏每對座標之間用空格分割，定了3組就是三角形
7.繪製多邊形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/ id="aa"></circle>
<rect x="220" y="50" width="50" height="50"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9"/></rect>
<ellipse cx="300" cy="200" rx="200" ry="80"
style="fill:#ddd;
stroke:#aaa;stroke-width:2"/></ellipse>
<line x1="0" y1="0" x2="300" y2="300"
style="stroke:rgb(99,99,99);stroke-width:2"/></line>
<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/></polygon>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"
style="fill:white;stroke:red;stroke-width:2"/></polyline>
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
var aa=document.getElementById("aa");
aa.onclick=function(){
aa.setAttribute("stroke-width","5");
};
};
</script>
</html>
使用polyline標籤，用法和多邊形同樣
8.繪製路徑
這裏是最靈活的處理，咱們能夠實現各類自定義的繪製，基本的參數：
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
有一半能夠和咱們canvas的路徑繪製對應上。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
var aa=document.getElementById("aa");
aa.onclick=function(){
aa.setAttribute("stroke-width","5");
};
};
</script>
</html>
操做是moveto其實座標，鏈接到 lineto 鏈接到lineto 最後closepath，實現閉合，造成了三角形繪製。
咱們利用貝塞爾繪製一次，用的是c，貝塞爾包含2組控制點，起始點由前面接口建立，最後寫一個結束點，因此c會寫3組座標
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<style type="text/css">
*{ margin:0; padding:0;}
</style>
<title>demo</title>
</head>
<body>
<svg width="800" height="800" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M250 150 C150 350 350 350 500 500" style="fill:#fff;stroke:#000;stroke-width:2"/>
</svg>
</body>
<script type="text/javascript">
window.onload=function(){
var aa=document.getElementById("aa");
aa.onclick=function(){
aa.setAttribute("stroke-width","5");
};
};
</script>
</html>
咱們把填充設置爲白色，看見一條如同ps鋼筆工具的路徑出現了。
svg的基本繪製操做就這些，一些實例定義，能夠看這裏：
相關文章
- 1. HTML5-SVG
- 2. SVG系列一
- 3. 瞭解SVG
- 4. 深刻理解 SVG 系列（二） —— SVG 座標系統
- 5. html5之svg
- 6. 【HTML5】——SVG基礎
- 7. HTML5 內聯 SVG
- 8. Html5 內聯SVG
- 9. HTML5 Canvas vs. SVG
- 10. 簡單瞭解svg
- 更多相關文章...
- • Spring體系結構詳解 - Spring教程
- • SVG
- SVG 教程 - • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 在windows下的虛擬機中,安裝華爲電腦的deepin操作系統
- 2. 強烈推薦款下載不限速解析神器
- 3. 【區塊鏈技術】孫宇晨：區塊鏈技術帶來金融服務的信任變革
- 4. 搜索引起的鏈接分析-計算網頁的重要性
- 5. TiDB x 微衆銀行 | 耗時降低 58%，分佈式架構助力實現普惠金融
- 6. 《數字孿生體技術白皮書》重磅發佈（附完整版下載）
- 7. 雙十一「避坑」指南：區塊鏈電子合同爲電商交易保駕護航！
- 8. 區塊鏈產業，怎樣「鏈」住未來？
- 9. OpenglRipper使用教程
- 10. springcloud請求一次好用一次不好用zuul Name or service not known
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. HTML5-SVG
- 2. SVG系列一
- 3. 瞭解SVG
- 4. 深刻理解 SVG 系列（二） —— SVG 座標系統
- 5. html5之svg
- 6. 【HTML5】——SVG基礎
- 7. HTML5 內聯 SVG
- 8. Html5 內聯SVG
- 9. HTML5 Canvas vs. SVG
- 10. 簡單瞭解svg