svg path参数

最新推荐文章于 2024-09-06 16:48:42 发布

weixin_30915951

最新推荐文章于 2024-09-06 16:48:42 发布

阅读量239

点赞数

文章标签： illustrator

原文链接：http://www.cnblogs.com/ngy7/p/3289245.html

版权

转自小黑写日记

在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>

螺旋：
<?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>

参考链接：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：

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>
      
</defs>
   <g>
      <circle cx="15" cy="15" r="15" fill="red"/>
</g>
</svg>

转载于:https://www.cnblogs.com/ngy7/p/3289245.html