友情提示:更多详情、每个命令的例子、参数变化对比图文详解,欢迎关注九十七度的博客:SVG《Path》命令详解

M = moveto

M x y 移动到指定坐标,xy分别为x轴和y轴的坐标点,类似画笔的起点。

path中的起点,必须存在(文档中虽然没有提到过,但是path的其他命令都需要依赖一个初始位置,而实际操作过程中也没有需要到可以不使用M的情况,后面发现有例外我再过来补充。

L = lineto

L x y 在初始位置(M 画的起点)和xy确定的坐标画一条线。
两点一线,直线,绘图中很常见的方式。

H = horizontal lineto

H x 沿着x轴移动一段位置

V = vertical lineto

V y 沿着y轴移动一段位置

C = curveto

C x1 y1 x2 y2 x y
三次贝塞尔曲线
当前点为起点,xy为终点,起点和x1y1控制曲线起始的斜率,终点和x2y2控制结束的斜率。

S = smooth curveto

S x2 y2 x y
简化的贝塞尔曲线
1.如果S命令跟在一个C命令或者另一个S命令的后面,它的第一个控制点,就会被假设成前一个控制点的对称点。

2.如果S命令单独使用,前面没有C命令或者另一个S命令,那么它的两个控制点就会被假设为同一个点。

Q = quadratic Bézier curve

Q x1 y1 x y
二次贝塞尔曲线Q
只需要一个控制点,用来确定起点和终点的曲线斜率。因此它需要两组参数,控制点和终点坐标。

T = smooth quadratic Bézier curveto

Q命令的简写命令。</br>
与S命令相似,T也会通过前一个控制点,推断出一个新的控制点。
1.T命令前面必须是一个Q命令,或者是另一个T命令

2.如果T单独使用,那么控制点就会被认为和终点是同一个点,所以画出来的将是一条直线

A = elliptical Arc

A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y
rx 弧的半长轴长度
ry 弧的半短轴长度
x-axis-rotation 是此段弧所在的x轴与水平方向的夹角,即x轴的逆时针旋转角度,负数代表顺时针旋转角度。
large-arc-flag 为1表示大角度弧线,0表示小角度弧线
sweep-flag 为1表示从起点到终点弧线绕中心顺时针方向,0表示逆时针方向。
xy 是终点坐标。

Z = closepath

从当前位置到起点画一条直线闭合。

友情提示:更多详情、每个命令的例子、参数变化对比图文详解,欢迎关注九十七度的博客:SVG《Path》命令详解

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

  1. [转帖]10分钟看懂Docker和K8S

    10分钟看懂Docker和K8S https://zhuanlan.zhihu.com/p/53260098 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这 ...

  2. 十分钟看懂AES加密

    十分钟看懂AES加密算法 今天看了Moserware的<A Stick Figure Guide to the Advanced Encryption Standard(AES)>收获了不 ...

  3. 5分钟看懂Code128条形码

    什么是Code128条形码? 相信大家看到这个都不陌生吧 1.前言 条形码种类很多,常见的大概有二十多种码制,其中包括:Code39码(标准39码).Codabar码(库德巴码).Code25码(标准 ...

  4. 10分钟看懂!基于Zookeeper的分布式锁

    实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,其中前两种方案网络上有很多资料可以参考,本文不做展开.我们来看下使用Zookeeper如何实现分布式锁. 什么是 ...

  5. SVG Path路径使用(一)

    一.<path> 标签 <path> 标签用来定义路径. 下面的命令可用于路径数据: M = moveto L = lineto H = horizontal lineto V ...

  6. 10分钟看懂Docker和K8S

    本文来源:鲜枣课堂 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫"dotCloud"的公司. 这家公司主要提供基于PaaS的云计算技术服务.具体来说,是和LXC有关的 ...

  7. svg path 路径

    许多字母命令(例如:M m)(但不是全部)成对.有一个大写和一个小写版本.大写版本是绝对版本,小写是相对版本.让我们继续以M为例: M 100,100 意思是“拿起笔并将其移动到确切的坐标100,10 ...

  8. 十分钟看懂,未来Web前端开发最新趋势

    首先,展望未来趋势我们就要弄懂过去的一年,也就是18年,web前端开发的重要新闻.重要事件和JavaScript的各种流行框架.模式发展趋势. 我们来快速回顾一下. NPM热门前端框架下载 先来看最热 ...

  9. 干货满满!10分钟看懂Docker和K8S(转)

    2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这家公司主要提供基于PaaS的云计算技术服务.具体来说,是和LXC有关的容器技术. LXC,就是Linux容器虚 ...

随机推荐

  1. 201521123066 《Java程序设计》第十四周学习总结

    1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...

  2. 浅谈SQL优化入门:2、等值连接和EXPLAIN(MySQL)

    1.等值连接:显性连接和隐性连接 在<MySQL必知必会>中对于等值连接有提到两种方式,第一种是直接在WHERE子句中规定如何关联即可,那么第二种则是使用INNER JOIN关键字.如下例 ...

  3. String类的常见面试题(3)

    1.判断定义为String类型的s1和s2是否相等 String s1 = "abc"; //这个"abc"对象首先会进常量池 String s2 = &quo ...

  4. 利用Docker快速创建Nginx负载均衡节点

    本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.Self-Host Kestrel 1. 在vs2017中新建dotnet core2. ...

  5. 配置exVim开发环境

    exVim主页 http://exvim.github.io/ 使用该配置原因: 简单,组织各种优秀插件,安装包很小,各种操作很流畅 实用,对于项目来说,只需要多出一个xx.exvim文件,所有符号等 ...

  6. oracle 表查询(一)

    通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salgrade表结构进行解说. emp 雇员表字段名称   数据类型       是否为空   备注-------- ...

  7. JAVA多线程---wait() & join()

    题外话: interrupt()方法  并不能中断一个正常运行的线程!!! class myThread extends Thread{ @Override public void run(){ fo ...

  8. 解决linux下部署科大讯飞时的版本过低问题

    在将项目部     署到阿里云服务器之后,需要将科大讯飞SDK下的libmsc64.so依赖库文件上传至/usr/java/jdk1.8.0_121/jre/lib/amd64路径下   在Windo ...

  9. 小符号反映大问题,Shell中下划线_与变量的关系。

    之前写过一个根据日期和时间自动命名文件名的时候遇到一个问题. #! /bin/bash read -p "please input the filename:" filename ...

  10. Linux入门之常用命令(3)

    df 查看硬盘总容量.已用容量和inode [-ikm] du 查看文件已用容量,显示所有文件 每块硬盘最多四个分区. fdisk [-l] [设备名称] 硬盘分区工具 (-l 显示这张硬盘的分区) ...