SVG是一種矢量圖格式，是Scalable Vector Graphics三個單詞的首字母縮寫。在xml檔案中的标簽是，畫出的圖形可以像一般的圖檔資源使用，例子如下：
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
android:fillColor="#FF000000"
android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />
其所畫出的圖形為
于此同時，android studio提供了豐富的圖檔資源，可以右鍵module,new->vector asset選擇，如下：
是不是很羨慕這些酷酷的圖形，當然自己也可以去動手去做。顯而易見，上面例子的重點是在PathData裡面的那一大竄數字：
android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z" />
xml檔案中：
共有三個标簽，下面就是部分：
先慢慢學習一些基本的文法：
M：move to 移動繪制點，作用相當于把畫筆落在哪一點。
L：line to 直線，就是一條直線，注意，隻是直線，直線是沒有寬度的，是以你什麼也看不到。
android:strokeColor="#333330" android:strokeWidth="10" 設定顔色和線寬
Z：close 閉合，嗯，就是把圖封閉起來。
C：cubic bezier 三次貝塞爾曲線
Q：quatratic bezier 二次貝塞爾曲線
A：ellipse 圓弧
每個指令都有大小寫形式，大寫代表後面的參數是絕對坐标，小寫表示相對坐标，相對于上一個點的位置。參數之間用空格或逗号隔開。
指令詳解：
M (x y) 把畫筆移動到x,y，要準備在這個地方畫圖了。
L (x y) 直線連到x,y，還有簡化指令H(x) 水準連接配接、V(y)垂直連接配接。
Z，沒有參數，連接配接起點和終點
C(x1 y1 x2 y2 x y)，控制點(x1,y1)( x2,y2)，終點x,y 。
Q(x1 y1 x y)，控制點(x1,y1)，終點x,y
C和Q會在下文做簡單對比。
A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
android:pathData=" M50,50 a10,10 1,1 0 1,0" />
rx ry 橢圓半徑
x-axis-rotation x軸旋轉角度
large-arc-flag 為0時表示取小弧度，1時取大弧度 (舍取的時候，是要長的還是短的)
sweep-flag 0取逆時針方向，1取順時針方向
L的用法：
android:pathData=" M10,0 L10,40 40,40" />
把畫筆放在(10,0)位置，連線10，40點 在連線40，40點。。。于是，一個直角三角形出來了~這裡沒有寫z，沒什麼關系。
Q和C的對比： 詳細了解貝塞爾曲線：
http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html
Q
android:pathData="M0,0 q30,90 80,20"/>
控制點1，30,90 ：
控制點2，80,20 :
C
android:pathData=" M0,0 c0,0 30,90 80,20" />
C 第一控制點(0,0) 第二控制點(30,90) 結束點(80,20) 或 c 第一控制點 第二控制點 結束點
現在修改第一個控制點：
android:pathData=" M0,0 c50,0 30,90 80,20" />
a:
這麼多 數字，怎麼看啊，可以直接拉到下面看作用。
android:pathData=" M50,50 a10,5 0,1 0 1,0" />
以50，50為起點，逆時針畫
橢圓圖形，x軸半徑10，y軸半徑5
轉動x軸~~~
android:pathData=" M50,50 a10,5 90,1 0 1,0" />
我想要橢圓上半段，此處修改為x軸半徑的兩倍
android:pathData=" M50,50 a10,5 90,1 0 20,0" />
橢圓左半段
android:pathData=" M50,50 a10,5 90 1 0 0 10" />
橢圓右半段
android:pathData=" M50,50 a10,5 90 1 1 0 10" />
android:fillColor="#fff70000" 下
android:pathData=" M50,50 a10,5 0 1 0 1 0" />
android:fillColor="#FFF22420" 上
android:pathData=" M50,50 a10,5 0 1 1 1 0" />
android:fillColor="#fff57000"右
android:pathData=" M50,50 a10,5 0 1 1 1 1" />
android:fillColor="#FF323243"左
android:pathData=" M50,50 a10,5 0 1 0 0 1" />
出現上面的情況可以想到是因為，起始點50,50在橢圓中的位置不同。那麼，再修改一下。
android:pathData=" M50,50 a10,5 0 1 1 0 7" /> 修改了右邊橢圓的代碼
現在取的是大弧度，是以看到這樣的效果，如果 7改為10(也就是y軸半徑的兩倍)這剛好會在 一半的位置。
現在取小弧度看看，
android:pathData=" M50,50 a10,5 0 0 1 0 7" /> ，可以看到小弧度 順時針畫圖。
再修改為逆時針，
android:pathData=" M50,50 a10,5 0 0 0 0 7" />
橢圓的屬性 差不多講解完成了，如下
android:pathData=" M50,50 a10,5 0 0 0 0 7" />
10，5 為橢圓x，y軸半徑
第一個0 為 x軸旋轉角度
第二個0 為取大小弧度，0為小，1為大
第三個0 為順逆時針，0為逆1為順
第四個0 為修改修改起始點在橢圓中的位置，y軸.
第四個 7 為修改修改起始點在橢圓中的位置，x軸。
這是前輩留下的圖：
裡面還有哪些屬性那？
android:name 定義該 path 的名字，這樣在其他地方可以通過名字來引用這個路徑
android:pathData 和 SVG 中 d 元素一樣的路徑資訊。
android:fillColor 定義填充路徑的顔色，如果沒有定義則不填充路徑
android:strokeColor 定義如何繪制路徑邊框，如果沒有定義則不顯示邊框
android:strokeWidth 定義路徑邊框的粗細尺寸
android:strokeAlpha 定義路徑邊框的透明度
android:fillAlpha 定義填充路徑顔色的透明度
android:trimPathStart 從路徑起始位置截斷路徑的比率，取值範圍從 0 到1
android:trimPathEnd 從路徑結束位置截斷路徑的比率，取值範圍從 0 到1
android:trimPathOffset 設定路徑截取的範圍 Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.
android:strokeLineCap 設定路徑線帽的形狀，取值為 butt, round, square.
android:strokeLineJoin 設定路徑交界處的連接配接方式，取值為 miter,round,bevel.
android:strokeMiterLimit 設定斜角的上限，Sets the Miter limit for a stroked path.
下面詳細講一下 android:strokeLineCap，android:strokeLineJoin 兩個屬性
android:pathData="M200,200 l100,300
M300,200 l-100,300
再沒有添加這兩條屬性前：
添加語句：android:strokeLineCap="round" 後可以看到有三個點改變了格式(左下角是圖形結束點，并沒有改變)
最後添加：android:strokeLineJoin="round" 左下角也做了改變，如下
這xml開始部分的代碼是做什麼的那？
android:width="24dp"
android:height="24dp"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
先看看有哪些屬性，
android:name 定義該drawable的名字
android:width 定義該 drawable 的内部(intrinsic)寬度,支援所有 Android 系統支援的尺寸，通常使用 dp
android:height 定義該 drawable 的内部(intrinsic)高度,支援所有 Android 系統支援的尺寸，通常使用 dp
android:viewportWidth 定義矢量圖視圖的寬度，視圖就是矢量圖 path 路徑資料所繪制的虛拟畫布
android:viewportHeight 定義矢量圖視圖的高度，視圖就是矢量圖 path 路徑資料所繪制的虛拟畫布
android:tint 定義該 drawable 的 tint 顔色。預設是沒有 tint 顔色的
android:tintMode 定義 tint 顔色的 Porter-Duff blending 模式，預設值為 src_in
android:autoMirrored 設定當系統為 RTL (right-to-left) 布局的時候，是否自動鏡像該圖檔。比如 阿拉伯語。
android:alpha 該圖檔的透明度屬性
裡面可以定義多了，這樣可以友善管理多個
android:name 定義 group 的名字
android:rotation 定義該 group 的路徑旋轉多少度，這樣圖檔就被旋轉了，注意寫數字的時候别暈了。
android:pivotX 定義縮放和旋轉該 group 時候的 X 參考點。該值相對于 vector 的 viewport 值來指定的。
android:pivotY 定義縮放和旋轉該 group 時候的 Y 參考點。該值相對于 vector 的 viewport 值來指定的。
android:scaleX 定義 X 軸的縮放倍數
android:scaleY 定義 Y 軸的縮放倍數
android:translateX 定義移動 X 軸的位移。相對于 vector 的 viewport 值來指定的。
android:translateY 定義移動 Y 軸的位移。相對于 vector 的 viewport 值來指定的。
定義目前繪制的剪切路徑，就是圖像的一部分剪切下來。注意，clip-path 隻對目前的 group 和子 group 有效。
原圖為上面的 叉 ，剪切後為：
終，下次為動畫的制作。有部分是前人的功勞~銘記。
Android vector 标簽 pathData 詳解
轉載位址:http://www.jianshu.com/p/a3cb1e23c2c4#rd Android Support Library 23.2 出來以後,在Android 5.0(API級别21 ...
Appium+python自動化(三十四)- 有圖有真相，很美很精彩 - 螢幕截圖和Android APP類型簡介(超詳解)
簡介 在實際自動化項目運作過程中,很多時候App可以會出現各種異常,為了更好的定位問題,除了捕捉日志我們還需要對運作時的裝置狀态來進行截屏.進而達到一種“有圖有真相”的效果. 截圖方法 方法1 sav ...
Android 6.0 RK3288 ROM編譯詳解+指令詳解【轉】
本文轉載自:http://blog.csdn.net/MLQ8087/article/details/58607692 Android 6.0 RK3288 ROM編譯詳解+指令詳解 原創 2017年 ...
HTML中DOM核心知識有哪些(帶執行個體超詳解)
HTML中DOM核心知識有哪些(帶執行個體超詳解) 一.總結: 1.先取html元素,然後再對他進行操作,取的話可以getElementById等 2.操作的話,可以是innerHtml,value等等 ...
Android EventBus 3.0 執行個體使用詳解
EventBus的使用和原理在網上有很多的部落格了,其中泓洋大哥和啟艦寫的非常非常棒,我也是跟着他們的部落格學會的EventBus,因為是第一次接觸并使用EventBus,是以我寫的更多是如何使用,源碼解 ...
Android開發：文本控件詳解——TextView(一)基本屬性
一.簡單執行個體: 建立的Android項目初始自帶的Hello World!其實就是一個TextView. 在activity_main.xml中可以建立TextView,從左側元件裡拖拽到右側預覽界面 ...
[置頂]
 xamarin android toolbar(踩坑完全入門詳解)
網上關于toolbar的教程有很多,很多新手,在使用toolbar的時候踩坑實在太多了,不好好總結一下,實在浪費.如果你想學習toolbar,你肯定會去去搜尋androd toolbar,既然你能看到 ...
Android 應用程式之間内容分享詳解(二)
轉載請注明出處:http://blog.csdn.net/xiaanming/article/details/9428613 Android 應用程式之間内容分享詳解(一) 之前給大家分享了你開發的應 ...
Android 布局學習之——Layout(布局)詳解二(常見布局和布局參數)
[Android布局學習系列] 1.Android 布局學習之——Layout(布局)詳解一 2.Android 布局學習之——Layout(布局)詳解二(常見布局和布局參數) 3.And ...
随機推薦
FireFox每次通路頁面時檢查最新版本
FireFox每次通路頁面時檢查最新版本 浏覽器都有自己的緩存機制,作為開發人員,每次js的修改都要清空緩存,顯然很不友善.而firefox并沒有提供ie那樣的設定. 下面的方法就可以非常友善的設定f ...
MySQL服務 - MySQL程式的配置檔案、參數、變量檢視
檢視配置檔案及讀取順序 MySQL的配置檔案以.cnf結尾,可能會有多個,而不同版本的MySQL程式的讀取配置檔案的路徑也都不同,要想擷取MySQL讀取配置檔案的順序可以通過以下指令檢視: shell ...
使用.net Stopwatch class 來分析你的代碼
當我們在調試,優化我們的代碼的時候,想知道某段代碼的真正的執行時間,或者我們懷疑某段代碼,或是某幾段代碼執行比較慢, 需要得到具體的某段代碼的具體執行時間的時候.有一個很好用的類Stopwatch. ...
HDU 1864最大報帳額 01背包問題
B - 最大報帳額 Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit St ...
一個基于WebGL的仿真3D水池有逼真的水波紋效果
最近在研究WebGL,看到國外很多高手做的很多超炫的3D效果,無比羨慕.忍不住把效果趴下來研究,下面介紹一個逼真的遊泳池中浮動小球的效果.效果非常絢麗,功能強大.示例可切換觀察水池的視角,不同視角考慮 ...
二叉樹單色路徑最長&;amp;&;amp;穿珠子
對樹的操作,特别了解遞歸的好處. //對于一棵由黑白點組成的二叉樹,我們需要找到其中最長的單色簡單路徑,其中簡單路徑的定義是從樹上的某點開始沿樹邊走不重複的點到樹上的 //另一點結束而形成的路徑,而路 ...
css 權威指南筆記( 六)-基本視覺格式化
塊級元素 百分數:邊框的寬度不能是百分數,隻能是長度.基本原則是隻使用百分數将無法建立完全靈活的元素布局(即所有屬性都可設定). 合并垂直外邊距 相鄰外邊距會沿着豎軸合并.兩個外邊距中較小的一個會被較 ...
influxdb + Grafana可視化監控平台
在centos6.5上influxdb + Grafana監控平台配置: 1.RedHat and CentOS users can install the latest stable version ...
【java】聊聊java裡的接口
接口的概念 java中的接口用于描述類應該具備什麼樣的功能,而不給出具體的實作,一個類可以“實作”多個接口 [注意]接口不是類,而是對類的一組描述 還是讓我們通過一個例子來看看接口如何運作吧! ...
Git詳解之二：Git基礎
Git 基礎 讀完本章你就能上手使用 Git 了(伯樂線上注:如果你對Git還不了解,建議從本Git系列第一篇文章開始閱讀).本章将介紹幾個最基本的,也是最常用的 Git 指令,以後絕大多數時間裡用到 ...