要不來畫畫吧，誒不存在。

SVG

svg是什么呢，是…（百度一下）

SVG是一種圖像文件格式，它的英文全稱為Scalable Vector Graphics，意思為可縮放的矢量圖形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）聯盟進行開發的。嚴格來說應該是一種開放標準的矢量圖形語言，可讓你設計激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像，可以用任何文字處理工具打開SVG圖像，通過改變部分代碼來使圖像具有交互功能，并可以隨時插入到HTML中通過瀏覽器來觀看。

哈哈簡短的說矢量圖，矢量圖粗俗點說，就是這張圖無論你放多大他還是很清晰的，矢量嘛。

那么想畫矢量圖關鍵就是學著描繪這些矢量了，其中path元素就最基礎同時也最多變，path是什么呢，是…（梅開二百度）

path元素是SVG基本形狀中最強大的一個，它不僅能創建其他基本形狀，還能創建更多其他形狀。你可以用path元素繪制矩形（直角矩形或者圓角矩形）、圓形、橢圓、折線形、多邊形，以及一些其他的形狀，例如貝塞爾曲線、2次曲線等曲線。path元素的形狀是通過屬性d來定義的，屬性d的值是一個“命令+參數”的序列。

?

開畫

新建一個文檔，就叫rect.svg。

編寫格式是xml格式，所以基本明白一些主要的元素功能就能搞定了。

<svg width="230" height="230"> </svg>

再定義一個組，組是什么呢，是…（再度）

SVG <g>元素用于將SVG形狀分組在一起。分組后，您可以像變形單個形狀一樣變換整個形狀。與 不能單獨成為轉換目標的嵌套 <svg>元素相比，這是一個優勢。您還可以設置分組元素的樣式，并像對待單個元素一樣重復使用它們。

大概像那個<div>？比如在組里定義透明度為1那么組內所有元素透明度都是1.

<svg width="230" height="230"> <g style="opacity:1"> </g> </svg>

然后開始定義路徑了，首先想干嘛呢，想做一個正方形按鈕，按鈕是圓角的，按鈕內有一個正方形框的圖案。

先有一個草圖，大概先規劃一些比例。

圖片長寬230，四周留空20，按鈕長寬就是190了，正方形框圖案在按鈕正中央，長寬都是90，框長10。

這些數據很重要，因為后面的path像是在坐標軸上定點連線，這時需要了解一些命令：

M 移動到的點的x軸和y軸的坐標
H 繪制平行線
V 繪制垂直線
Z 關閉路徑，回到起點。
大寫表示絕對定位，小寫表示相對定位。

絕對定位，指的是以最左上角為原點的坐標軸定位，相對就是以當前的點作為原點。

坐標軸，x軸向右，y軸向下。

外層的這個按鈕，可以利用rect元素簡單描繪一下：

<svg width="230" height="230"> <g style="opacity:1"><rect x="20" y="20" rx="22" ry="22" width="190" height="190" fill="#e8e8e8"/> </g> </svg>

然后就變成了這樣

接著想一想圖案，它90的長寬，那么它的起點應該就在（70，70）這個位置。

所以先移動：M70 70

已經到這個點了，那么可以使用相對位置了，接著向下畫90的直線，再向右畫90：

M70 70 v90 h90

這時腦海里想著上面是什么，沒錯那是一個L。然后就向上走啦，當然可以v-90這樣寫，也可以V70，一個相對一個絕對，但其實都是同一個點。

最后z，就自動回到起點（70，70），形成一個正方形：

M70 70 v90 h90 v-90 z

這時方框的外線，還有一個內線，讓框長10，也就是還要畫一個長寬70的正方形。因為這個框要填顏色的，所以另起一個路徑是不行的，所以在剛那個路徑繼續畫，現在的點在哪？在（70，70），也就是外正方形的左上角，這時想去內正方形的左上角，只需要m10 10即可，然后操作都一樣啦：

M70 70 v90 h90 v-90 z m10 10 h70 v70 h-70 z

填沖顏色加起來就是：

<svg width="230" height="230"><g style="opacity:1"><rect x="20" y="20" rx="22" ry="22" width="190" height="190" fill="#e8e8e8"/><path d="M70 70 v90 h90 v-90 z m10 10h70v70h-70z" fill="#202020"/></g> </svg>

看起來就是：

?

OHHHHHHHHHHHHHHHHHHHHHHHHHHH

關鍵要理解各個命令，各個元素就其實很簡單啦。

總結

以上是生活随笔為你收集整理的绘制svg的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。