svg 路径path

<path> 标签用来定义路径。

下面的命令可用于路径数据:

M = moveto(M X,Y) :将画笔移动到指定的坐标位置
L = lineto(L X,Y) :画直线到指定的坐标位置
H = horizontal lineto(H X):画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的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轴水平向下。
所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系
指令和数据间的空格可以省略。

Example:

1、LHV指令

M 起点X,起点Y L(直线)终点X,终点Y H(水平线)终点X V(垂直线)终点Y
如:M 10,20 L 80,50 M 10,20 V 50 M 10,20 H 90

2、A指令

允许不闭合。可以想像成是椭圆的某一段,共七个参数:

A RX,RY,XROTATION,FLAG1,FLAG2,X,Y

RX,RY指所在椭圆的半轴大小。
XROTATION指椭圆的X轴与水平方向顺时针方向夹角,可以想像成一个水平的椭圆绕中心点顺时针旋转XROTATION的角度。
FLAG1只有两个值,1表示大角度弧线,0为小角度弧线。
FLAG2只有两个值,确定从起点至终点的方向,1为顺时针,0为逆时针。
X,Y为终点坐标。

如:m 200,250 a 150,30 0 1 0 0,70

参考:

http://www.w3school.com.cn/svg/svg_path.asp

http://www.cnblogs.com/netWild/archive/2010/12/07/1898792.html

时间: 11-26

svg 路径path的相关文章

深度掌握SVG路径path的贝塞尔曲线指令

一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完全不能承受富有创意的创作的,至少得有我当年追我老婆的脸皮厚才行. 然而,瞅瞅维基百科上的释义,或者其他一些相关的技术文章,总是离不开各种公式,一大堆变量……例如下面维基截图缩略图: 完全是数学爱好者的菜啊!我想,要是让UI设计师们去学习这些东西,估计还不如一刀来个痛快的! 这就是爱好领域与能力掌握的

segment-实现SVG路径描边绘制与动画的轻量库

今天来一起了解一个实现SVG路径描边绘制与动画的轻量级类库segment,我们从轻松上手.使用详解.资源和案例.源码解读等几个方面进行介绍. 1. 轻松上手 html方面添加segment,定义path. <script src="/dist/segment.min.js"></script> <svg> <path id="my-path" ...> </svg> JS方面利用path实例化一个segme

SVG 学习&lt;八&gt; SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

查阅一些关于贝塞尔曲线资料后,对贝塞尔曲线有了大概的了解. 个人对贝塞尔曲线的理解: 二次贝塞尔曲线:由起点.终点和一个控制点控制的范围内绘制的一条曲线: 三次贝塞尔曲线:由起点.终点和两个个控制点控制的范围内绘制的一条曲线: 四次贝塞尔曲线/五次贝塞尔曲线 ... ... 以此类推. 贝塞尔曲线命令 理解了什么是贝塞尔曲线,贝塞尔曲线命令就很好理解了. SVG中只能定义二次 三次贝塞尔曲线 二次贝塞尔曲线:Q x1 y1 x y: x1 y1 定义二次贝塞尔曲线控制点坐标, x y 定义二次贝

svg路径动画心得

svg动画,随着路线运动,项目中需要用到,接触的时候感觉很高级,但是不会-无从下手呀!于是在网上找相关资料,先借鉴再修改成自己的. <svg width="500" height="350" viewBox="0 0 500 350"> <!--运动的路径轨迹--> <path style="fill:none;" stroke="#000" id="motionPa

SVG -- path路径

SVG 路径 - <path> <path> 元素用于定义一个路径. 下面的命令可用于路径数据: M = moveto = 移动到 L = lineto = 连线到 H = horizontal lineto = 水平连线连接到 V = vertical lineto = 垂直连线连接到 C = curveto = 使用平滑三次贝塞尔曲线连接到 S = smooth curveto = 使用平滑曲线连接到 Q = quadratic Bézier curve = 使用二次贝塞尔曲线

SVG入门

一. 什么是SVG?SVG(Scalable Vector Graphics)可伸缩矢量图形,它是用XML格式来定义用于网络的基于矢量的图形,而它的特点就是 图像在放大或改变尺寸的情况下其图形质量不会有所损失,同时他和DOM一样都是W3C的一个标准.这里解释下位图和矢量图:位图,也就是我们经常能看到的图片,他是一个平面上密集排布的店的集合,也就是说它是由一个个点构成的.而如果对他进行放大那么相对应的点就会进行放大,这样就会让图片显得十分不清晰粗糙.矢量图,也称为面向对象的图像或绘图图像,在数学上

超级强大的SVG SMIL animation动画详解

本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordpress/?p=4333 //zxx: 本文的SVG在有缓存时候是无动画效果,此时您可以试着[右键-新标签页打开图片]. 一.SVG SMIL animation概览 1. SMIL是什么?SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体集成语言)的首字母缩写简称,是有标准

svg path中的贝塞尔曲线

首先介绍以下什么是贝塞尔曲线 贝塞尔曲线又叫贝茨曲线(Bezier),由两个端点以及若干个控制点组成,只有两个端点在曲线上,控制点不在曲线上,只是控制曲线的走向. 控制点个数为0时,它是一条直线; 控制点个数为1时,它是二次贝塞尔曲线; 控制点个数为2时,它是三次贝塞尔曲线: .... 数学公式 二次贝塞尔曲线 p0,p2是起始点,p1是控制点 分别把p0,p1,p2点的x,y坐标带入,求出曲线上的点的x,y坐标 三次贝塞尔曲线 p0,p3是起始点,p1,p2是控制点 svg的path中与贝塞尔

Python标准库03 路径与文件 (os.path包, glob包)

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 路径与文件的简介请参看Linux文件系统 os.path包 os.path包主要是处理路径字符串,比如说'/home/vamei/doc/file.txt',提取出有用信息. import os.path path = '/home/vamei/doc/file.txt' print(os.path.basename(path)) # 查询路径中包含的文件名 print(os.p