svg path參數

轉自小黑寫日記

在W3SCHOOL的SVG教程中能夠看出，SVG除了內建了一些基本圖形矩形圓形橢圓線條多邊形折線外，還支持使用<path>標籤來自定義路徑從而建立複雜的矢量圖形(Paths represent the outline of a shape which can be filled or stroked.)。本文將以附圖及實例的方式來詳細介紹SVG Path的語法結構，並在文末簡要說明如何在DEGRAFA中使用支持SVG的PATH類。

 

PATH十種指令：

括號內爲相應參數，詳細解釋見後文。

M = moveto(M X,Y)
L = lineto(L X,Y)
H = horizontal lineto(H X)
V = vertical lineto(V Y)
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)
T = smooth quadratic Belzier curveto(T ENDX,ENDY)
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)
Z = closepath()
註釋：
　　座標軸爲以(0,0)爲中心，X軸水平向右，Y軸水平向下。
　　全部指令大小寫都可。大寫絕對定位，參照全局座標系；小寫相對定位，參照父容器座標系
　　對於S,T指令，其X1,Y1爲前一條曲線的X2,Y2的反射
　　指令和數據間的空格能夠省略
　　同一指令出現屢次能夠只用一個

L H V指令
　M起點X，起點YL（直線）終點X，終點YH（水平線）終點XV（垂直線）終點Y
　如M10,20,L80,50,M10,20,V50,M10,20,H90

C指令——三次貝塞曲線
　C第一控制點X，第一控制點Y 第二控制點X，第二控制點Y曲線結束點X，曲線結束點Y

S指令
　S第二控制點X，第二控制點Y 結束點X，結束點Y

Q指令——二次貝塞曲線
　Q控制點X，控制點Y 曲線結束點X，曲線結束點Y
如M0,25,Q12.5,37.5,25,25,M25,25,Q37.5,12.5,50,25

T指令——映射
　T映射前面路徑後的終點X，映射前面路徑後的終點Y

A指令
　Elliptical Arc，容許不閉合。能夠想像成是橢圓的某一段，共七個參數。
　RX,RY指所在橢圓的半軸大小
　XROTATION指橢圓的X軸與水平方向順時針方向夾角，能夠想像成一個水平的橢圓繞中心點順時針旋轉XROTATION的角度。
　FLAG1只有兩個值，1表示大角度弧線，0爲小角度弧線。
　FLAG2只有兩個值，肯定從起點至終點的方向，1爲順時針，0爲逆時針
　X,Y爲終點座標
　如M0,25,A12.5,12.5,0,1,1,0,25.01Z表示一個圓心在(12.5,25)，半徑爲12.5的圓。其中起點和終點幾乎重合，用Z指令將它們閉合，注意終點不能填(0,25)，那樣A指令是沒法被解析的。

 

由以上介紹能夠看出，手工繪製SVG路徑是至關複雜的。對於簡單的SVG圖形，通常只使用M,L,Q,A,Z五種指令完成。更復雜的圖形則必需要靠軟件來幫助完成，好比ADOBE ILLUSTRATOR。

 

兩個完整的例子：

把代碼拷入記事本，保存爲"**.svg"便可。若是沒法運行，可能須要SVGVIEWER，詳情參照SVG中國相關內容或者GOOGLE下載一個

三角形：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M250 150 L150 350 L350 350 Z" />

</svg>

螺旋：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

 參考連接：http://www.w3.org/TR/SVG/paths.html

 

FLEX中使用DEGRAFA的PATH類指定DATA
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" xmlns:degrafa="http://www.degrafa.com/2007">
<degrafa:Surface>
 <degrafa:GeometryGroup scaleX="2" scaleY="2">
     <degrafa:Path data="M0,25,Q12.5,37.5,25,25,M25,25,Q37.5,12.5,50,25" stroke="{blackstroke}"/>
    </degrafa:GeometryGroup>
 <degrafa:strokes>
  <degrafa:SolidStroke id="blackstroke" color="#000000" weight="1">
     </degrafa:SolidStroke>
 </degrafa:strokes>
</degrafa:Surface> 
</mx:Application>
如上，將手工繪製或者軟件幫助完成的PATH字符串填入Path data="***"便可查看效果。

一個比較著名的效果圖就是SVG TIGER：

 

FLEX中使用BitmapFill的source屬性指定SVG類文件

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                backgroundGradientColors="[#333333, #222222]"
                xmlns:degrafa="com.degrafa.*"
                xmlns:paint="com.degrafa.paint.*"
                xmlns:geometry="com.degrafa.geometry.*">               
    <degrafa:Surface verticalCenter="0" horizontalCenter="0">
        <degrafa:fills>
            <paint:BitmapFill id="bitmapFill" source="{svgTest}" smooth="true"/>
        </degrafa:fills>
        <degrafa:GeometryGroup scaleX="1" scaleY="1">
            <geometry:Circle fill="{bitmapFill}" radius="450"/>
        </degrafa:GeometryGroup> 
    </degrafa:Surface>
 <mx:Script>
  <![CDATA[
   [Embed(source="circle.svg")]
   [Bindable]
   public var svgTest:Class;
  ]]>
 </mx:Script>
</mx:Application>

circle.svg:

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">  <desc>All SVG documents should have a description</desc>    <defs>      <!-- Items can be defined for later use -->  </defs>   <g>      <circle cx="15" cy="15" r="15" fill="red"/>  </g></svg>