目录

SVG 学习<一>基础图形及线段

SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

SVG 学习<三>渐变

SVG 学习<四> 基础API

SVG 学习<五> SVG动画

SVG 学习<六> SVG的transform

SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令

(转)利用 SVG 和 CSS3 实现有趣的边框动画

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

查阅一些关于贝塞尔曲线资料后,对贝塞尔曲线有了大概的了解。

个人对贝塞尔曲线的理解:

二次贝塞尔曲线:由起点、终点和一个控制点控制的范围内绘制的一条曲线;

三次贝塞尔曲线:由起点、终点和两个个控制点控制的范围内绘制的一条曲线;

四次贝塞尔曲线/五次贝塞尔曲线 ... ... 以此类推。

贝塞尔曲线命令

理解了什么是贝塞尔曲线,贝塞尔曲线命令就很好理解了。

SVG中只能定义二次 三次贝塞尔曲线

二次贝塞尔曲线:Q x1 y1 x y; x1 y1 定义二次贝塞尔曲线控制点坐标, x y 定义二次贝塞尔曲线终点的位置;

三次贝塞尔曲线:C x1 y1 x2 y2 x y; x1 y1 定义三次贝塞尔曲线第一个控制点坐标,x2 y2 定义三次贝塞尔曲线第二个控制点位置  x y 定义三次贝塞尔曲线终点的位置;

例:

        <path d="M10 10 Q200 250 10 500" stroke="rgb(0,150,255)"/>
<path d="M130 300 C250 0 800 600 900 300" stroke="rgb(255,0,0)"/>

蓝色为二次贝塞尔曲线,红色为三次贝塞尔曲线。

光滑贝塞尔曲线命令

光滑贝塞尔曲线是贝塞尔曲线的光滑版(曲线更圆滑);

光滑贝塞尔曲线命令:S 光滑版二次贝塞尔曲线  Q 普通二次贝塞尔曲线   T 光滑版三次贝塞尔曲线   C 普通版三次贝塞尔曲线。

例:

        <path d="M10 100 S100 600 310 100" stroke="rgb(0,150,255)"/>
<path d="M10 100 Q100 600 310 100" stroke="rgb(0,0,0)"/>

        <path d="M130 300 C250 100 500 300 900 300" stroke="rgb(255,0,0)"/>
<path d="M130 300 T250 100 500 300 900 300" stroke="rgb(0,0,0)"/>

以上是两种贝塞尔曲线的对比

还有关于更详细的贝塞尔曲线视频教程  光滑贝塞尔曲线视频教程

SVG 学习<八> SVG的路径——path(2)贝塞尔曲线命令、光滑贝塞尔曲线命令的更多相关文章

  1. SVG 学习<七> SVG的路径——path(1)直线命令、弧线命令

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  2. SVG 学习<六> SVG的transform

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  3. SVG 学习<五> SVG动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  4. 2. svg学习笔记-svg中的坐标系统和viewbox

    我是通过<SVG精髓>这本书学习的svg,说实话,这本书写的不好,或者说翻译的不好,我没有看过这本书的原版,不知道原文写的怎么样,但是翻译出来的有些句子真的很拗口.以前老师给我们API文档 ...

  5. SVG 学习<四> 基础API

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  6. SVG 学习<三>渐变

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  8. SVG 学习<一>基础图形及线段

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  9. 深度掌握SVG路径path的贝塞尔曲线指令

    一.数字.公式.函数.变量,哦,NO! 又又一次说起贝塞尔曲线(英语:Bézier curve,维基百科详尽中文释义戳这里),我最近在尝试实现复杂的矢量图形动画,发现对贝塞尔曲线的理解馒头那么厚,是完 ...

随机推荐

  1. Go hashcode 输入一个字符串,得到一个唯一标识码

    如何输入一个字符串,得到一个唯一的hashcode? 例子如下: package main import ( "fmt" "hash/crc32" ) // S ...

  2. App音频内录 录音

    1.android模拟器 天天模拟器+BlueStacks 2.高清内录软件 Audio Record Wizard.exe 3.音频剪切软件 Adobe Audition CS6

  3. MySql 常见错误代码大全 VV2

    从机一直1593错误,排查了半天发现是从的配置文件中的server-id没改导致,此低级错误记录下警醒自己 B.1. 服务器错误代码和消息 服务器错误信息来自下述源文件: · 错误消息信息列在shar ...

  4. 了解ARM+Android

    第一部分 认识ARM,方案商,GPU , 芯片 1.1 ARM ARM(Advanced RISC Machines)是微处理器行业的一家知名企业,设计了大量高性能.廉价.耗能低的RISC处理器.相关 ...

  5. iwebshop (: Cannot use object of type stdClass as array in)

    今天在PHP输出一个二维数组的时候,出现了“Fatal error: Cannot use object of type stdClass as array in……”. 这个二维数组是这样的: Ar ...

  6. WebGL和ThreeJs学习5--ThreeJS基本功能控件

      Threejs 2017年6月6日 15:06 Stats: new Stats();性能监视器,性能测试的方法,引入 Stats.js        http://www.hewebgl.com ...

  7. angular的组件通信

    参见这里   总结如下: @Input和@Ouptut 获取父实例,获取子实例 通过service共享数据 发送事件EventEmitter(个人喜欢angular-event-service) rx ...

  8. win10和ubuntu16.04双系统Geom Error

    报错信息: Geom Error Reboot and Select proper Boot device or Insert Boot Media in selected Boot device a ...

  9. C# 读写 ini 配置文件

    虽说 XML 文件越发流行,但精简的 ini 配置文件还是经常会用到,在此留个脚印. 当然,文中只是调用系统API,不会报错,如有必要,也可以直接以流形式读取 ini文件并解析. /// <su ...

  10. git安装及git命令的用法

    git安装流程 https://git-scm.com/download/win (官网下载) git安装步骤 1.双击安装包 图文解释: