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容器虚 ...
随机推荐
- 201521123066 《Java程序设计》第十四周学习总结
1. 本周学习总结 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) 在自己建立的数据库上执行常见SQL语句(截图) - ...
- 浅谈SQL优化入门:2、等值连接和EXPLAIN(MySQL)
1.等值连接:显性连接和隐性连接 在<MySQL必知必会>中对于等值连接有提到两种方式,第一种是直接在WHERE子句中规定如何关联即可,那么第二种则是使用INNER JOIN关键字.如下例 ...
- String类的常见面试题(3)
1.判断定义为String类型的s1和s2是否相等 String s1 = "abc"; //这个"abc"对象首先会进常量池 String s2 = &quo ...
- 利用Docker快速创建Nginx负载均衡节点
本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.Self-Host Kestrel 1. 在vs2017中新建dotnet core2. ...
- 配置exVim开发环境
exVim主页 http://exvim.github.io/ 使用该配置原因: 简单,组织各种优秀插件,安装包很小,各种操作很流畅 实用,对于项目来说,只需要多出一个xx.exvim文件,所有符号等 ...
- oracle 表查询(一)
通过scott用户下的表来演示如何使用select语句,接下来对emp.dept.salgrade表结构进行解说. emp 雇员表字段名称 数据类型 是否为空 备注-------- ...
- JAVA多线程---wait() & join()
题外话: interrupt()方法 并不能中断一个正常运行的线程!!! class myThread extends Thread{ @Override public void run(){ fo ...
- 解决linux下部署科大讯飞时的版本过低问题
在将项目部 署到阿里云服务器之后,需要将科大讯飞SDK下的libmsc64.so依赖库文件上传至/usr/java/jdk1.8.0_121/jre/lib/amd64路径下 在Windo ...
- 小符号反映大问题,Shell中下划线_与变量的关系。
之前写过一个根据日期和时间自动命名文件名的时候遇到一个问题. #! /bin/bash read -p "please input the filename:" filename ...
- Linux入门之常用命令(3)
df 查看硬盘总容量.已用容量和inode [-ikm] du 查看文件已用容量,显示所有文件 每块硬盘最多四个分区. fdisk [-l] [设备名称] 硬盘分区工具 (-l 显示这张硬盘的分区) ...