注: 笔记来自于http://www.jb51.net/html5/72250.html  以及http://blog.csdn.net/u013291076/article/details/27078345,本文引用纯粹为了用于了解path路径,当做笔记记录。

基础:

  1. <path d="M100,100 L200,200 L200,400" fill="#333" stroke="#000" />
  2. path标签通过属性d来定义路径,定义信息由一段字符串构成,另外path也可以通过fill和stroke属性来定义填充和边框。
  3. d属性的信息其实并不复杂,由字母和数字构成,数字表示坐标点,字母负责表示如何连接这些坐标点。比如上面的示例中,M表示起点,L表示直线连接,所以d的信息可以这样解读:
  4. M100,100    ->    以(100,100)坐标点为起点
  5. L200,200    ->    从(100,100)向(200,200)画一条直线
  6. L200,400    ->    从(200,200)向(200,400)画一条直线
  7. 在path标签的d属性中,一共有10个命令可以使用,下面5个命令是基础,比较简单。
  8. M     移动到(moveTo)    x,y    开始点坐标
  9. Z    闭合路径(closepath)    将路径的开始和结束点用直线连接
  10. L    直线(lineTo)    x,y    当前节点到指定(x,y)节点,直线连接
  11. H    水平直线    x    保持当前点的y坐标不变,x轴移动到x,形成水平线
  12. V    垂直直线    y    保持当前点的x坐标不变,y轴移动到y,形成垂直线

绘制圆弧指令:A  rx ry x-axis-rotation large-arc-flag sweep-flag x y
用圆弧连接2个点比较复杂,情况也很多,所以这个命令有7个参数,分别控制曲线的的各个属性。下面解释一下数值的含义:
rx,ry 是弧的半长轴、半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针转动的角度。
large-arc-flag 为1 表示大角度弧线,0 代表小角度弧线。
sweep-flag 为1代表从起点到终点弧线绕中心顺时针方向,0 代表逆时针方向。
x,y 是弧终端坐标。
前两个参数和后两个参数就不多说了,很简单;下面就说说中间的3个参数:
x-axis-rotation代表旋转的角度,体会下面例子中圆弧的不同:

复制代码

代码如下:

<svg width="320px" height="320px">
<path d="M10 315
L 110 215
A 30 50 0 0 1 162.55 162.45
L 172.55 152.45
A 30 50 -45 0 1 215.1 109.9
L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

上面的HTML画出下面的图形:

从图中可以看到椭圆旋转参数的不同导致绘制的圆弧方向不同,当然这个参数对正圆来说没有影响。

svg(1) path路径的更多相关文章

  1. SVG矢量绘图 path路径详解(贝塞尔曲线及平滑)

    以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 function qBerzi ...

  2. SVG格式图片转成HTML中SVG的Path路径

    AI图标制作完成之后,保存的svg文件包含许多AI的信息,如果要在HTML中使用,我们需要在svg文件中提取/修改信息,重新保存. 1.在AI中已经完成图标,要保存SVG文件,点击“文件(File)” ...

  3. 坐标转换成SVG的path路径

    大家好,我是一个刚入职的前端小白,入职后一直做关于svg 的东西,我将自以为很方便的方法提供给大家. function svgPathCurv(a,b,curv) { /* * 弯曲函数. * a:a ...

  4. 5分钟看懂svg path 路径的所有命令(更有API解释、有图、有图文对比解析)

    友情提示:更多详情.每个命令的例子.参数变化对比图文详解,欢迎关注九十七度的博客:SVG<Path>命令详解 M = moveto M x y 移动到指定坐标,xy分别为x轴和y轴的坐标点 ...

  5. SVG的path的使用

    SVG的path的使用: 参考:http://justcoding.iteye.com/blog/2226354 <%@ page language="java" conte ...

  6. 简单聊一聊那些svg的沿路径运动

    之前遇见动画就很想用css实现,显然有些效果是我们力所不能及,实现起来麻烦,效果不好,让人捉急.其实归结起来,不同的动画有自己的优势,根据实际情况进行取舍.本文就告诉大家如何用SVG写出个简单动画.就 ...

  7. d3.js path路径

    转自:http://www.d3js.cn/?p=68 svg的path标签被称为”可以组成任何形状的形状” SVG Path可以绘制任何形状的图形,包括矩形,圆形,椭圆,折线,多边形,直线,曲线等. ...

  8. svg实现绘制路径动画

    1,首先用svg绘制一条path路径,然后进行如下操作 ps: 下面是svg中两个属性及值的意义 stroke-dasharray是让你指定画出的线段每段的长度,第二个值是各段之间空隙的长度. str ...

  9. Linux下修改PATH路径

    1.#PATH=$PATH:/opt/lamp/mysql/bin       使用这种方法,只对当前会话有效,也就是说每当登出或注销系统以后,PATH 设置就会失效 2.#vi /etc/profi ...

随机推荐

  1. 【C#Windows 服务】 《二》INI配置文件

    一.工具: VS2015+NET Framework4.5. 二.操作: 1.创建INIHelp帮助类 2.丰富帮助类操作 3.windows实例调用 三.代码: 1.INI帮助类: 1 2 3 4 ...

  2. WLAN STA/AP 并发

    WLAN STA/AP 并发 Android 9 引入了可让设备同时在 STA 和 AP 模式下运行的功能.对于支持双频并发 (DBS) 的设备,此功能让一些新功能得以实现,例如在用户想要启用热点 ( ...

  3. XRDP与VNC的关系(转载)

    XRDP与VNC的关系 如果仅仅安装XRDP协议.是不能在windows上使用远程桌面连接到Ubuntu. 还须要安装VNCServer才行. 所以,XRDP启动之后.系统会自己主动启动一个VNC会话 ...

  4. string.split 应用

    采用string.split将字符串依据分隔符,转换成字符串数组,生成的字符串数组中会包含空数组元素,需要通过StringSplitOptions.RemoveEmptyEntries参数选项去除. ...

  5. [PostCss] Easily Load Google Fonts with PostCSS Font Magician

    Configuring Google Fonts can be quite an annoying process to setup. Using Font Magician with PostCSS ...

  6. vijos - P1176奇怪的数列 (递归 + 找规律)

    P1176奇怪的数列 Accepted 标签:[显示标签] 背景 一天.学军数学小组的成员遇到了一个奇怪的数列,正巧信息小组的你碰到了他们. 于是他们把这个数列展示给你-- 描写叙述 这个数列是这种: ...

  7. 学习 shell —— 创建序列数组

    list/array 1. seq 方法创建 基本用法: $ a_num_seq = ($seq 5) $ echo $a_num_seq 1 2 3 4 5 a_num_seq 得到是字符串,不同之 ...

  8. 10.MongoDB:将Json数据直接写入MongoDB的方法

    Json转Bson MongoDB中是以Bson数据格式进行存储的,Json字符串没有办法直接写入MongoDB 可以将Json字符串转换成DBObject或者Document,然后写入MongoDB ...

  9. Python(三) 变量与运算符

    一.什么是变量 变量 = [1,2] 二.变量的命名规则 字母,数字,下划线,首字母不能是数字 系统关键字 不能用在变量名中 保留关键字 区别大小写 a=1,   a='1',   a=(1,2),  ...

  10. C/C++(C++返回对象与应用区别,类成员的存储)

    返回对象与应用区别: 拷贝构造器发生的时机: 1.构造新对象 A a, A b = a; 2.传参或返回对象 对于普通变量来说,传引用效果不是很明显,对于类对象而言,传对象效果很高. 传引用等价于扩大 ...