在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>
分享到:
相关推荐
有时您不能使用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内容进行解析,并在屏幕上进行绘制。