上回書說到把SVG整個複製貼上進html的body裡，其實也可以粘到div裡，隨你心情啦

最開始我寫了個Java小程式，透過程式將SVG檔案的內容嵌進body然後再輸出成HTML檔案，因為在程式中SVG檔案可以像XML檔案一樣處理，可以取得Node或Element之類的，可以新增屬性比如id什麼的

總之如果不是我的SVG檔案過大，我就手動複製貼上了。

反正是弄進html的body裡了

而且之前我把svg標籤設了id為svg，第一層唯一的g標籤設了id為g

然後用Snap.svg.js就可以對這個嵌入了svg的html檔案為所欲為了（幾乎）

可以從以下網址下載，而且還有線上文件，挺好

下載下來的包裡找到snap.svg.js或snap.svg-min.js，在html頁面中引用就行了，而且我習慣用JQuery，所以把這兩個引入先

<head><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery.js"></script><script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="snap.svg-min.js"></script></head>

自己再建個total.js（total.js是我自己起的名字）用於對SVG的操作，也引入到html裡，省的都寫在html頁裡，因為我用的SVG檔案已經太大了（怨念5秒鐘）

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="total.js"></script>

這樣準備工作就差不太多了吧。

下一步就要說說jquery+snap+svg的一些個人的粗淺的使用了

svg使用小計

相關文章