前端圖形技術的發展：SVG

SVG圖——基於數學的描述

使用方式：

• 瀏覽器直接打開
• 在HTML中使用<img>標籤引用
• 直接在HTML中使用<svg>標籤
• 作爲CSS背景

如：

<img src="如 simplr.svg" width="50" height="50" />

和一般img不同，這個地方的width和height可以改！

SVG繪圖書寫格式（大概）

其不同圖形有不同格式，但都包裹在一個標籤中 —— <svg>

<svg xmlns="http://www.w3.org/2000/svg">
	...
</svg>

…

/* 對於長方形： */
<rect
	x="10"
	y="10"
	width="150"
	height="100"
	stroke="red"
	fill="none">
</rect>

/* 對於圓： */
<circle
	cx="250"
	cy="60"
	r="50"
	stroke="red"
	fill="none">
</circle>

/* 對於直線： */
<line
	x1="10"
	y1="120"
	x2="160"
	y2="220"
	stroke="red">
</line>

/* 對於折線 */
<polyline
		points="250 120
				300 220
				200 220"
		stroke="red"
		fill="none">
</polyline>

SVG中的圖形分組

<g>標籤創建分組 transform屬性定義座標改變 屬性繼承
比如：“一個錘子” —— 一般我們移動通過改變每個x/y，改變顏色我們通過修改每個stroke；
現在通過 分組 ，把共有屬性 如stroke、fill 放在g標籤內，整體移動的話就在<g>內添加transform屬性。
下面代碼：

<svg xmlns="http://www.w3.org/2000/svg">
	<g stroke="green" fill="none" transform="translate(0,50)">
		<rect x="100" y="50" width="100" height="50"></rect>
		<rect x="140" y="100" width="20" height="120"></rect>
	</g>
</svg>

SVG的使用——“打標記”

在需要是使用svg圖的地方引入<svg>標籤，格式如下：

<svg data-src="svg文件路徑" width="..." height="..."></svg>

然後配合下面的JS代碼使用。

使用bower管理（前端）包依賴

1. npm install bower -g
2. 添加jQuery依賴：bower install jquery --save
3. 安裝已定義bower包（bower.json）的項目的依賴：bower install

（JS）動態加載SVG

前面所說我們用data-src屬性，那麼我們將它取出來：

$(function(){
	$('svg['data-src']').each(function(index,svg){
		var src=$(svg).data('src');
		$.ajax({
			url:src,
			dataType:'xml',
			success:function(svgDocument){
				var $doc=$(svgDocument.documentElement);
				$doc.attr({
					width:$(svg).attr('width');
					height:$(svg).attr('height');
				});
				$(svg).after($doc).remove();
			}
		});
	});
});

總結來說，其
優勢： 保持svg文件的獨立，方便編輯、維護；
思路：

• 在原本Dom中記錄文件路徑
• 腳本“掃描”記錄的記錄，用Ajax請求加載
• 替換掉原本用做記錄的Dom