最近接觸SVG這種矢量格式，感覺不錯。
做一下小的總結，備忘用。
因爲基礎的圖是用Visio畫的，而又發現SVG不錯，而又發現Visio可以直接另存爲SVG格式，所以就將畫好的Visio圖直接另存爲SVG文件。不過有優點也有缺點。
優點是轉化後的SVG文件，幾乎完美的再現了Visio圖的所有圖形屬性。
所有的圖形不論是形狀、位置、線條都完全一致，之所以說幾乎，是因爲在Visio圖中寫的文字註釋，在SVG的顯示中某些部分會稍稍有一點點的錯位，總的來說沒啥問題，可以接受。
缺點就是Visio圖中所體現的圖形之間的邏輯關係沒有了，只剩下圖形屬性和空間關係（座標等）
那麼，拿到SVG文件，打開查看內容，第一眼看去就是一個xml，但是瀏覽器可以直接打開，很神奇，而且是矢量圖。
那麼，我第一個想到的就是用Javascript操控它。
經過一系列不成功的嘗試，最後找到辦法，那就是把SVG嵌入到HTML中。
在百度一搜“把SVG嵌入HTML”，基本會看到一堆人寫的四種方式。
前三種是：embed、object、iframe
即在這三種標籤中引入要嵌入的svg文件的路徑
embed與iframe用的是
src="xxx.svg"
object用的是
data="xxx.svg"
給我的感覺就是都不好用
那就剩第四種了，也就是把整個svg文件的內容複製粘貼到html的body裏
還有最起碼，svg標籤得設個id
<svg id="svg>
假設我的SVG文件內容是這個樣子滴
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="34.0787in" height="23.8031in" viewBox="0 0 2453.67 1713.83" xml:space="preserve" color-interpolation-filters="sRGB" class="st16" id="svg"> <g v:mID="0" v:index="1" v:groupContext="foregroundPage" id="g"> <g></g> </g> </svg>
如上就是被我簡化了的由Visio轉化而來的
最外面只有一個svg標籤，我把它的id設成svg
svg下有一個g標籤，我把它的id設成g
而g標籤下又有一堆的g標籤，而這些個g標籤都自動設置好了id，就不贅述了
唯一需要我手動設置id的是就最外面的svg標籤和其下一層唯一的元素那個g標籤
設置了id就可以用js來進行操控了，hiahiahia
其實我所轉化的svg文件，有一萬多行（因爲來源的Visio圖就很大，圖形灰常多）
然後我們把這個svg文件的所有內容全都copy paste到html的春天裏，哦不，是body裏，就變成下面這樣了
<html> <head></head> <body> <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="34.0787in" height="23.8031in" viewBox="0 0 2453.67 1713.83" xml:space="preserve" color-interpolation-filters="sRGB" class="st16" id="svg"> <g v:mID="0" v:index="1" v:groupContext="foregroundPage" id="g"> <g></g> </g> </svg> <body> </html>
好吧，萬里長征第一步
當然，肯定要有第二步第三步……或者倒敘手法的第0步之類的
後面接着說