深入SVG路径~~~在DEGRAFA中使用PATH
- 博客分类:
- 技术杂绘
在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下载一个
三角形:
螺旋:
style="fill:white;stroke:red;stroke-width:2"/>
参考链接: http://www.w3.org/TR/SVG/paths.html
FLEX中使用DEGRAFA的PATH类指定DATA
如上,将手工绘制或者软件帮助完成的PATH字符串填入Path data="***"即可查看效果。
一个比较著名的效果图就是SVG TIGER :
FLEX中使用BitmapFill的source属性指定SVG类文件
circle.svg:
All SVG documents should have a description
发表评论
-
C/C++字符串使用军规
2012-07-06 09:51 1310C/C++字符串使用军规 本文对常见的C++ stri ... -
C#----初识正则表达式
2012-07-06 09:44 625正则表达式多用在验证输入有效性上。.NET有专门的类来使用 ... -
VBscript中的正则表达式
2012-07-06 09:37 733VBscript中的正则表达式 在VBscript中, ... -
3dmax导出插件-tiamo
2012-07-06 09:29 785学无止境,三人行 ... -
扩展FCKeditor,使其具有分页功能
2012-07-05 20:44 576扩展FCKeditor编辑器,使其具有分页功能。 先看 ... -
masm32开发com组件
2012-07-03 13:42 625标题: masm32开发com组件介绍[一][二][三] ... -
masm32开发com组件
2012-07-03 12:17 736标题: masm32开发com组件介绍[一][二][三] ... -
关于js插入页面元素问题 在js中创建html元素并在 引入js的地方直接显示
2012-07-02 10:14 1266最近开发网页,有许多组件需要js的方式引入 有个需求 ... -
JAVA+fms
2012-07-02 10:14 803最近完成的 Java Flex Fms 视频聊天程序,虽然 ... -
3D 视频墙 3D IMAGE/MEDIA GRID/WALL GALLERY
2012-07-02 10:14 605If you are interested with th ... -
flashdevelop Build halted with errors (fcsh).
2012-07-02 09:42 810... -
flex 读取配置文件 与PHP交互 圆饼图
2012-07-01 09:34 476FLEX文件 teacherevalute.mxml ... -
Flex加载文件数据流
2012-07-01 09:34 717Flex加载文件数据流 本文使用URLStream, ... -
在Flex控件中使用XMLListCollection
2012-07-01 09:34 468现在,应用程序已 ... -
Flex form 提交list数据表单
2012-07-01 09:34 982在Flex+J2EE开发中,采用动态脚本的方式提交一个li ... -
flex 界面改进
2012-07-01 09:34 510f 代码如下: HTT ... -
CiscoVPN Client Error 1720问题的解决方法
2012-06-30 17:52 1164CiscoVPN Client Error 1720问题 ... -
IE8不能正常登录网上银行的解决方法
2012-06-30 17:52 710一、关于IE8的"启用内存保护帮助减少联机攻击& ... -
英文Windows无法打开中文名CHM文件的解决方法
2012-06-30 17:52 762win2003英文版中,直接打开一个带中文名称的chm文件 ... -
Adobe flash cs5 的Java运行时环境初始化错误 完美解决方法
2012-06-30 17:52 712下载网络上的Adobe f ...
相关推荐
有时您不能使用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路径动画
SvgPathEditor在浏览器中编辑或创建SVG路径: : 如何使用基本的:在路径字段中粘贴或编辑原始路径单击+将新命令添加到路径,选择类型,然后单击目标通过拖放移动点单击一个点,然后在...按钮上,在选定的命令之后...
SVG路径反转库这是一个简单的SVG路径逆转库,具有非常简单的API。安装使用npm安装: $> npm install svg-path-reverse使用图书馆这是一个通用库,您可以通过require.js,UMD,commonjs,浏览器等方式加载它,不管它...
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 ...