5分钟看懂svg path 路径的所有命令(更有API解释、有图、有图文对比解析)
友情提示:更多详情、每个命令的例子、参数变化对比图文详解,欢迎关注九十七度的博客: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解释、有图、有图文对比解析)的更多相关文章
- [转帖]10分钟看懂Docker和K8S
10分钟看懂Docker和K8S https://zhuanlan.zhihu.com/p/53260098 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这 ...
- 十分钟看懂AES加密
十分钟看懂AES加密算法 今天看了Moserware的<A Stick Figure Guide to the Advanced Encryption Standard(AES)>收获了不 ...
- 5分钟看懂Code128条形码
什么是Code128条形码? 相信大家看到这个都不陌生吧 1.前言 条形码种类很多,常见的大概有二十多种码制,其中包括:Code39码(标准39码).Codabar码(库德巴码).Code25码(标准 ...
- 10分钟看懂!基于Zookeeper的分布式锁
实现分布式锁目前有三种流行方案,分别为基于数据库.Redis.Zookeeper的方案,其中前两种方案网络上有很多资料可以参考,本文不做展开.我们来看下使用Zookeeper如何实现分布式锁. 什么是 ...
- SVG Path路径使用(一)
一.<path> 标签 <path> 标签用来定义路径. 下面的命令可用于路径数据: M = moveto L = lineto H = horizontal lineto V ...
- 10分钟看懂Docker和K8S
本文来源:鲜枣课堂 2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫"dotCloud"的公司. 这家公司主要提供基于PaaS的云计算技术服务.具体来说,是和LXC有关的 ...
- svg path 路径
许多字母命令(例如:M m)(但不是全部)成对.有一个大写和一个小写版本.大写版本是绝对版本,小写是相对版本.让我们继续以M为例: M 100,100 意思是“拿起笔并将其移动到确切的坐标100,10 ...
- 十分钟看懂,未来Web前端开发最新趋势
首先,展望未来趋势我们就要弄懂过去的一年,也就是18年,web前端开发的重要新闻.重要事件和JavaScript的各种流行框架.模式发展趋势. 我们来快速回顾一下. NPM热门前端框架下载 先来看最热 ...
- 干货满满!10分钟看懂Docker和K8S(转)
2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这家公司主要提供基于PaaS的云计算技术服务.具体来说,是和LXC有关的容器技术. LXC,就是Linux容器虚 ...
随机推荐
- Java第十四周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- 从JS和jQuery浅谈DOM操作,当我们在获取时,究竟获取了什么
0.写在前面的话 自己对前端的东西一直不是很熟,现在开始要想办法从前端各个地方去获取想要的属性值的时候,也基本是在网上现炒现卖,几周下来,发现自己还是迷迷糊糊,可以算是一无所获. 所以就抽时间,把这一 ...
- mysql数据库-中文乱码问题解决方案
来自:http://www.2cto.com/database/201108/101151.html MySQL会出现中文乱码的原因不外乎下列几点: .server本身设定问题,例如还停留在latin ...
- JDBC在javaweb中的应用之分页数据查询
分页查询 分页查询是java web开发中经常使用到的技术.在数据库中数据量非常大的情况下,不适合将所有的数据全部显示到一个页面中,同时为了节约程序以及数据库的资源,就需要对数据进行分页查询操作. 通 ...
- Apache Spark 2.2.0 中文文档 - Spark RDD(Resilient Distributed Datasets)论文 | ApacheCN
Spark RDD(Resilient Distributed Datasets)论文 概要 1: 介绍 2: Resilient Distributed Datasets(RDDs) 2.1 RDD ...
- MongoDB 所支持的数据类型 创建和删除集合 创建和删除数据库
数据类型 MongoDB 支持如下数据类型: String:字符串.存储数据常用的数据类型.在 MongoDB 中,UTF-8 编码的字符串才是合法的. Integer:整型数值.用于存储数值.根据你 ...
- 自学Unity3D 之 贪吃蛇 添加摄像机跟随
在Unity的世界中, 物体的位置都是由向量构成的. 今天所需要做的就是让摄像机保持跟蛇头的相对距离. 首先 设蛇头的位置在A 点 , 摄像机的位置在B 点 则 我们可以知道 他们的offse ...
- 蓝色巨人IBM
1911年IBM的前身CRT建立,在中华民国时期就与中国有很多商业合作,中国中央银行,中国银行,黄埔造船厂,建国后直到中美建交,IBM与中国的关系越来越紧密,今晚看了一遍关于蓝色巨人的视频,收益匪浅. ...
- 《JavaScript闯关记》视频版硬广
<JavaScript闯关记>视频版硬广 stone 在菜航工作时,兼任内部培训讲师,主要负责 JavaScript 基础培训,2016年整理的<JavaScript闯关记>课 ...
- PuTsangTo-单撸游戏开发01 Flag与计划
先立下flag,至少1年之内坚持并2年之内完成自己的一个梦想--游戏开发. 没有参加培训也不打算参加培训,就纯靠业余时间自学并用自己的思路完成一整套游戏体系.做出此决心时也已经做好准备烂尾了,但是有种 ...