在W3SCHOOL的SVG教程 中 可以看出,SVG除了内建了一些基本图形矩形圆形椭圆线条多边形折线外,还支持使用标签来自定义路径从而创建复杂的矢量图形 (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下载一个
三角形:
height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
螺旋:
height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
参考链接: http://www.w3.org/TR/SVG/paths.html
FLEX中使用DEGRAFA的PATH类指定DATA
如上,将手工绘制或者软件帮助完成的PATH字符串填入Path data="***"即可查看效果。
一个比较著名的效果图就是SVG TIGER :
FLEX中使用BitmapFill的source属性指定SVG类文件
circle.svg:
height="200" xmlns="http://www.w3.org/2000/svg">
All SVG documents should have a description
发表评论
-
C#连接数据库的ConnectionString字符串的格式说明
2012-07-06 09:52 1562连接字符串的基本格式包括一系列由分号分隔的关键字/值对。等 ... -
Asp.Net调用Office组件操作时的DCOM配置
2012-07-03 13:44 1276在项目中将数据导出为Excel格式时出现"检索C ... -
Window Presentation Foundation系列---从HelloWorld认知WPF
2012-07-02 12:56 733无能是我自己写的 ... -
用JavaFX访问ArcGIS Server的REST服务(2)
2012-07-02 12:56 859上一篇文章介绍了ArcGIS Server地图服务JSON ... -
fxmq
2012-07-02 12:56 509Flex Message Queue (fxmq) (ba ... -
tile布局的ButtonBar
2012-07-02 12:55 644flex/spark" x ... -
关于flex的资料
2012-07-01 10:30 1984====Adobe官方==== Adobe : ... -
为什么用*? 为什么不用*?
2012-07-01 10:28 597离开RoR有一段时间了,本来不想提些负面的东西,不过JE猎 ... -
谈谈我对未来的想法吧
2012-07-01 10:28 355来总行珠海研发中 ... -
实战 OpenLaszlo 与 db4o
2012-07-01 10:28 374本文于去年年底完 ... -
java面笔试总结
2012-07-01 10:28 5212010、10、12 湖南华诺集团面试题集 1、D ... -
[转载]as3面试题
2012-06-30 16:51 715[转载]as3面试题 2011年08 ... -
RIA活动)Adobe(北京2011??8??28)开发者技术日,个人备忘录暨内容概要
2012-06-30 16:51 569RIA活动)Adobe(北京2011??8??28)开发者技术 ... -
评论 (
2012-06-30 16:51 566评论 ( 2010年10月08日 ... -
使用Flex和Actionscript开发Flash游戏――碰撞检测
2012-06-30 16:51 513使用Flex和Actionscript开发Flash游戏――碰 ... -
成为一名高端的Flash游戏开发工程师需要具备的方方面面
2012-06-30 16:51 579成为一名高端的Flash游 ...
相关推荐
有时您不能使用transform属性,而必须直接将更改应用于svg路径。 那么这个包是给你的:)! 注意:此软件包适用于字符串,而不适用于完整的svg xml源。 安装 npm install svgpath 例子 var svgpath = require ( 'svg...
html5 svg路径上的文字动画
SVG路径中的点确定点是否在SVG路径中-从代码例子检查单个点是否在单个闭合路径内: const { pointInSvgPath } = require ( 'point-in-svg-path' )pointInSvgPath ( 'M80 80A 45 45, 0, 0, 0, 125 125L 125 80 Z' , ...
从svg路径数据中检索边界框。 const getBounds = require ( 'svg-path-bounds' ) let [ left , top , right , bottom ] = getBounds ( 'M0 0L10 10 20 0Z' ) // [0, 0, 20, 10] bounds = getBounds(path | ...
NULL 博文链接:https://helius1214.iteye.com/blog/619509
path-slider.js是一款基于SVG路径运动的js轮播插件。该js轮播插件可以根据指定的SVG路径,分布排列多个DOM元素,然后使这些DOM元素在SVG路径上执行轮播动画。
一个封装了vivus的vue组件,能够播放svg路径动画
SVG路径反转库这是一个简单的SVG路径逆转库,具有非常简单的API。安装使用npm安装: $> npm install svg-path-reverse使用图书馆这是一个通用库,您可以通过require.js,UMD,commonjs,浏览器等方式加载它,不管它...
SvgPathEditor在浏览器中编辑或创建SVG路径: : 如何使用基本的:在路径字段中粘贴或编辑原始路径单击+将新命令添加到路径,选择类型,然后单击目标通过拖放移动点单击一个点,然后在...按钮上,在选定的命令之后...
MM.SVG路径MM.SVGPath 提供了用于操作 SVG 路径的 utils 函数。应用程序接口MM.SVG路径静态方法MM.SVGPath.parse(pathStr) 解析路径字符串并返回一个包含命令字母和参数的对象数组。MM.SVGPath....
SVG路径Svg 路径动画
SVGPath2Text 将SVG轮廓(又名SVG路径; SVG Glyphes)转换回文本的蛮力工具。 如果您需要较小的文件大小,则很有帮助。 包含一个Demo-SVG文件。 该工具将字形(即SVG路径)从模板映射到SVG文件中找到的元素。 这...
我们选择删除D3上的缺陷,并进一步泛化代码,以使其他人可以更轻松地在他们的项目中使用它。 安装 安装说明取决于您是否在项目中使用D3.js。 如果您打算在gradient-path旁边使用D3,则不需要安装tinygradient 。 ...
#text2svg text2svg 是一个命令行工具,可将文本转换为 SVG 路径数据数组。 可以将输出复制到项目中,让您将对象映射到字体路径上。安装好老git: git clone https://github.com/mshenfield/text2svg 用法cd 进入...
Segment 是一个小的 Javascript 类(没有依赖),它可以绘制动态 SVG 路径。示例代码:function cubicIn(t) { return t * t * t; }function done() { alert("Done!"); } segment.draw("25%", ...
将 svg 路径转换为多边形 通过对路径上的采样点将 svg 路径转换为 svg 多边形的示例源。
自己刚刚整理的全国地图svg path 资源,目前只整理了(全国、北京、天津),其他省份还在陆续整理中
简单有效地处理SVG路径数据(path [d]属性内容)。 用法 安装模块: npm install --save svg-pathdata 或将添加到HTML中的脚本中。 然后在您JavaScript文件中: const { SVGPathData , SVGPathDataTransformer ...
SVG中Path内容的解析,可以根据pathdata的string内容进行解析,并在屏幕上进行绘制。