SVG 基礎

早期在 IE6 的時代接觸到 javascript ，覺得這個東西相當有趣，還可以搭配 java applet 做出很多效果，後來還用 java applet 開發[電子地圖EGM](http://yiharng.moralist.com.tw/EGM/) 並利用 javascript 去控制 applet 中的物件；在那個時期想要在網頁上畫向量的點線面是相當麻煩的一件事，我當時的做法是利用 applet 來畫，後來得知還有另一個方式是 [VML](https://zh.wikipedia.org/wiki/VML%E8%AF%AD%E8%A8%80) ，只是在當時只有 IE 支援，而且我要開發地圖需要更快的速度以及要解決網路傳輸的問題，最後還是選擇 applet ，當時甚至規劃了一整套 javascript 的 function ，可以在 applet 上畫向量，而如今瀏覽器已經不再支援 applet ，javascript 的功能也強大到足以取代 applet 和 flash 現在要在瀏覽器畫向量圖完全沒有問題，使用 SVG 不但功能強大，而且很多繪圖軟體都支援，和 javascript 的整合也相當完整，那麼就在這裡先整理 SVG 的基礎架構吧 ! ``` 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" svg - 最外層 svg 宣告，參數: width - 寬 height - 高 viewbox - 左上x 左上y 寬 高 (重新定義座標系) preserveAspectRatio - 預設為 xMidYMid meet 參數組合為 xMin,xMid,xMax (注意 x 是小寫) 加上 YMin,YMid,YMax (注意 Y 是大寫) 加上空格後接 meet (填滿) 或 slice (裁切) 設為 none 會變形縮放 g - group，相當於 layer line - 畫線，參數 x1,y1 畫到 x2,y2 polyline - 畫線，參數 points="x1,y1 x2,y2 x3,y3 ..." polygon - 畫面，參數 points="x1,y1 x2,y2 x3,y3 ..." rect - 矩形，參數 x,y,width,height,rx,ry (rx,ry 為圓角) circle - 畫圓，參數 cx,cy,r(半徑) ellipse - 橢圓，參數 cx,cy,rx,ry text - 文字，參數 x,y image - 圖片，參數 href="網址" x,y,width,height,preserveAspectRatio 共用參數 : **(CSS 有設定時以 CSS 設定優先)** stroke : "#顏色" , 線段顏色 stroke-width : n , 線段寬度 fill : "#顏色" , 填充顏色 fill-rule : nonzero 或 evenodd ``` 關於 **preserveAspectRatio** 的值同 svg 參數，可以參考 [這裡](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio) ，底下的範例設為 none 這樣圖片才會跟著設定的大小變形 ## 範例: ``` $mmcode(r1) ``` <div id="a08211" class="mmresult r1"> <style> .a08211_c1 { stroke:#000; stroke-width:3; fill:none; } .a08211_c2 { stroke:#f00; fill:#ff0; stroke-width:3; font-size:54px; } </style> <svg width="300" height="300" viewbox="0 0 350 300" preserveAspectRatio="xMidYMid meet" style="background-color:#ddddff"> <g id="a08211_layer1" class="a08211_c1"> <line x1="0" y1="0" x2="100" y2="20"/> <line x1="0" y1="10" x2="100" y2="30" stroke="#ff0000"/> <line x1="0" y1="20" x2="100" y2="40" stroke="#ff0000" style="stroke:#00ff00"/> <!-- 當 css 的 style 設定 stroke 後，本來的 stroke 設定就被蓋掉了 --> <polyline points="120,5 200,5 200,40 160,40"/> <polygon points="120,65 200,65 200,100 160,100"/> </g> <g id="a08211_layer2" class="a08211_c2"> <rect x="10" y="60" width="60" height="40" rx="20" ry="10"/> <circle cx="40" cy="160" r="30" /> <ellipse cx="150" cy="160" rx="50" ry="30"/> <polyline points="220,5 300,5 300,40 260,40"/> <polygon points="220,65 300,65 300,100 260,100"/> <text x="210" y="180">123</text> <image href="https://yiharng.github.io/bird.jpg" x="0" y="200" width="300" height="100" preserveAspectRatio="none"/> </g> </svg> </div>