svg笔记----------path篇

每个路径都必须以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个参数。

• 点所在椭圆的x 半径和y 半径,逗号分隔。
• 椭圆的x 轴旋转角度x-axis-rotation。
• large-arc-flag,如果需要圆弧的角度小于180 度,其为0;如果需要圆弧的角度大于或等于180 度,则为1。
• sweep-flag,如果需要弧以负角度绘制则为0,以正角度绘制则为1。
• 终点的x 坐标和y 坐标(起点由最后一个绘制的点或者最后一个moveto 命令确定)。

时间: 2024-10-03 22:55:43

svg笔记----------path篇的相关文章

Vue学习笔记进阶篇——过渡状态

本文为转载,原文:Vue学习笔记进阶篇--过渡状态Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,比如: 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都被事先存储起来,可以直接转换到数字.做到这一步,我们就可以结合 Vue 的响应式和组件系统,使用第三方库来实现切换元素的过渡状态. 状态动画和watcher 通过 watcher 我们能监听到任何数值属性的数值更新.可能听起来很抽象,所以让我们先来看看使用 T

Vue学习笔记入门篇——组件的使用

本文为转载,原文:Vue学习笔记入门篇--组件的使用 组件定义 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件使用 注册 注册一个全局组件,你可以使用 Vue.component(tagName, options).组件在注册之后,便可以在父实例的模块中以自定义元素 的形式使用.

Vue学习笔记入门篇——组件的内容分发(slot)

本文为转载,原文:Vue学习笔记入门篇--组件的内容分发(slot) 介绍 为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板.这个过程被称为 内容分发 (或 "transclusion" 如果你熟悉 Angular).Vue.js 实现了一个内容分发 API,使用特殊的 'slot' 元素作为原始内容的插槽. 编译作用域 在深入内容分发 API 之前,我们先明确内容在哪个作用域里编译.假定模板为: <child-component> {{ messa

Vue学习笔记入门篇——组件的通讯

本文为转载,原文:Vue学习笔记入门篇--组件的通讯 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B.它们之间必然需要相互通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件.然而,在一个良好定义的接口中尽可能将父子组件解耦是很重要的.这保证了每个组件可以在相对隔离的环境中书写和理解,也大幅提高了组件的可维护性和可重用性.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递

《javascript权威指南》读书笔记——第二篇

<javascript权威指南>读书笔记--第二篇 金刚 javascript js javascript权威指南 今天是今年的196天,分享今天的读书笔记. 第2章 词法结构 2.1 字符集 JavaScript程序是用Unicode字符集编写. Unicode是ASCII和Latin-1的超集,支持几乎所有语言. ES3 要求支持Unicode 2.1及后续版本 ES5 要求支持Unicode 3及后续版本 2.1.1 区分大小写 JavaScript是区分大小写的. HTML 并不区分大

SVG动画-基础篇

参考资料: http://www.w3school.com.cn/svg/index.asp https://msdn.microsoft.com/zh-cn/library/gg193979 简介 SVG 指可伸缩矢量图形.是使用 XML 来描述二维图形和绘图程序的语言. SVG 代码的根元素是以 <svg> 元素开始,</svg>结束.width 和 height 属性可设置 SVG 文档的宽度和高度.version 属性可定义所使用的 SVG 版本,xmlns 属性可定义 S

SystemTap 学习笔记 - 安装篇

https://segmentfault.com/a/1190000000671438 在安装前,需要知道下自己的系统环境,我的环境如下: uname -r 2.6.18-308.el5 Linux 2.6.18-308.el5 #1 SMP Tue Feb 21 20:06:06 EST 2012 x86_64 x86_64 x86_64 GNU/Linux 安装 为了部署 SystemTap,需要安装以下两个 RPM 包: systemtap systemtap-runtime 以 root

《javascript权威指南》读书笔记——第一篇

<javascript权威指南>读书笔记--第一篇 金刚 javascript js javascript权威指南 由于最近想系统学习下javascript,所以开始在kindle上看这本书来补充下. 今天是今年的196天,由于我之前承诺过,每天分享读书笔记,只是之前分享的是大众读物,所以随手分享到kindle阅读群里了.但是现在读的是技术类书籍,分享到kindle读书群不太合适,所以还是以博客的形式分享.这样子,一个链接,大家感兴趣了就点开看看,不感兴趣了,就不点开. 其实这篇文章应该是昨天

lwIP移植笔记 - ethernet篇

我们已经完成了lwIP的系统移植,那么我们就需要进行ethernet的移植工作. ethernet的移植工作,主要是"填空"ethernetif.c的过程!(PS. 再一次感谢Adam Dunkels大侠的无私工作!以及对他的敬意!) ethernetif.c位置(../src/netif) 一.移植硬件 1. 初始化 实现函数:static    void    low_level_init(struct    netif    *netif); (1) 初始化MAC地址 (2) 初