每个路径都必须以moveto 命令开始

moveto、lineto和closepath

<path d="M 10 10 L 100 10z"/>

大写字母命令的坐标是绝对的，小写字母命令的坐标是相对的。其它情况：

1.z(closepath)命令没有坐标，它的大小写形式效果相同。

2.如果使用小写m（moveto）启动路径，它的坐标会被解析为绝对位置，因为没有参照位置来计算相对位置。

水平线和垂直线很常用，足以成为快捷命令。路径可以使用H 命令加绝对x 坐标，或者h命令加相对x 坐标，来指定一条水平线。类似地，垂直线可以使用V 命令加绝对y 坐标，或者v 命令加相对y 坐标来指定。

下面的路径绘制了一个宽度为15 单位、高度为25 单位的矩形。

<path d="M 12 24 h 15 v 25 h -15 z"/>

我们还可以在水平lineto 和垂直lineto 命令后面放置多个坐标值，但只在使用线标记时才会看到效果，H 25 35 45 和H 45 相同，v 11 13 15 和v 39 相同。

所有不必要的空白都可以消除。命令字母后面不需要空白，因为所有的命令都是一个字母。数字和命令之间不需要空白，因为命令字母并不能作为数字的一部分。正数和负数之间也不需要空白，因为负数的前置减号并不能作为正数的一部分。

圆弧命令以字母A（绝对坐标的缩写）或者a（相对坐标的缩写）开始，后面紧跟以下7个参数。

A 命令的7个参数：• 点所在椭圆的x 半径和y 半径。• 椭圆的x 轴旋转角度x-axis-rotation。• large-arc-flag，决定是绘制长弧线还是短弧线。• sweep-flag，控制弧线的绘制方向，顺时针或逆时针绘制弧线，得到的结果是一种“镜像”效果• 终点的x 坐标和y 坐标（起点由最后一个绘制的点或者最后一个moveto 命令确定）

转载于:https://www.cnblogs.com/iloveyou-sky/p/5757612.html

svg笔记----------path篇相关推荐

  1. 微信小程序开发笔记 进阶篇④——getPhoneNumber 获取用户手机号码（小程序云）

    文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.云函数 五.程序流程 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机号码. 但是,因 ...

  2. 微信小程序开发笔记 进阶篇⑤——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之前）

    文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...

  3. 微信小程序开发笔记 进阶篇⑥——getPhoneNumber 获取用户手机号码（基础库 2.21.2 之后）

    文章目录 一.前言 二.前端代码wxml 三.前端代码js 四.后端java 五.程序流程 六.参考 一.前言 微信小程序开发笔记--导读 大部分微信小程序开发者都会有这样的需求:获取小程序用户的手机 ...

  4. 7.3 TensorFlow笔记(基础篇):加载数据之从队列中读取

    前言 整体步骤 在TensorFlow中进行模型训练时,在官网给出的三种读取方式,中最好的文件读取方式就是将利用队列进行文件读取,而且步骤有两步: 1. 把样本数据写入TFRecords二进制文件 2 ...

  5. 7.2 TensorFlow笔记(基础篇): 生成TFRecords文件

    前言 在TensorFlow中进行模型训练时,在官网给出的三种读取方式,中最好的文件读取方式就是将利用队列进行文件读取,而且步骤有两步: 1. 把样本数据写入TFRecords二进制文件 2. 从队列 ...

  6. 《深入浅出WPF》笔记——绑定篇（一）

    上一节,有记录写到:在WPF里,数据驱动UI,数据占核心地位,UI次之.怎么恢复数据的核心地位,那就要先了解一下Binding. 一.Binding 基础 1.1WPF中Data Binding的带来 ...

  7. WPF学习笔记(数据绑定篇3)

    接上回的<WPF学习笔记(数据绑定篇2)>,继续 BindValidation 此示例演示了: 如何使用错误模板: 使用样式显示错误信息: 如何在校验发生异常时执行回调: 首先,你可以看见 ...

  8. UI设计师SVG动画进阶篇——路径变形动画（上篇）

    之前分享了一些自己平时整理的可以通用的SVG动画的教程基本都是最基础的变化,旋转也好,缩放也好,沿路径运动也好,只需要定义CSS3的一些动画属性值或者SVG的动画属性标签,当然,运用得当的话,依靠这些 ...

  9. PhalAPI学习笔记拓展篇 ———ADM模式中NotORM实现简单CURD

    PhalAPI学习笔记拓展篇 ---ADM模式中NotORM实现简单CURD 前言 内容 ADM模式 ADM简单介绍 准备工作 PhalAPI提供的CURD操作方法 业务实现 结束语 前言 公司业务需 ...

最新文章

  1. 【Node.js】2.开发Node.js选择哪个IDE 开发工具呢
  2. python+selenium自动登录qq空间并下载相册
  3. LeetCode 2166. 设计位集（Bitset）
  4. Linux查看文件以及文件夹个数
  5. Atitit webservice之道 艾提拉著 目录 1. 基本说明Web Service 1 2. 基本概念与内部构成 2 2.1. Web services要使用两种技术： XML SOAP
  6. 基于Docker swarm 集群搭建SSR 学习
  7. 离线打包报错缺少io.dcloud.PandoraEntry
  8. office彻底卸载工具
  9. 毕业论文给图、表格、公式编号（不设置多级列表）
  10. 5位数的数字黑洞是多少_五位数数字黑洞编程
  11. opencv+paddle orc 识别图片提取表格信息
  12. matlab 某一函数半高,1. 半高宽的知识
  13. 受用一生的高效PyCharm使用技巧（三）
  14. 盛世昊通打造线上线下融合的百业联盟商业生态
  15. 微信公众平台开发订阅号
  16. 00_linux 设备驱动模型 2.6以后通用模型
  17. springboot 基于.ftl模板生成pdf文件
  18. SuperMap GIS二次开发MVC实战训练-佛山顺德慢性病GIS项目总结
  19. realme双12真我GT大师探索版2499元起，还可1212元买入
  20. linux检查防病毒系统,[操作系统-Linux]常用的防病毒软件

热门文章

  1. 十一、案例：TabBar的封装
  2. LeetCode MySQL 1890. 2020年最后一次登录（year）
  3. LeetCode 1874. 两个数组的最小乘积和
  4. LeetCode 802. 找到最终的安全状态（逆向图+拓扑排序）
  5. LeetCode MySQL 1205. 每月交易II（union all）*
  6. LeetCode 1257. 最小公共区域（最小公共祖先）
  7. [Hands On ML] 7. 集成学习和随机森林
  8. 程序员面试金典 - 面试题 01.08. 零矩阵
  9. 剑指Offer - 面试题17. 打印从1到最大的n位数
  10. LeetCode 1038. 从二叉搜索树到更大和树（逆中序-右根左-降序）