关于svg:SVGSVG的夺命利器path

39次阅读

共计 6565 个字符，预计需要花费 17 分钟才能阅读完成。

【SVG】SVG 的夺命利器——path

博客阐明

文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！

阐明

昨天一公布，忽然看到有敌人留言，心愿看到更多的 SVG 的文章。忽然有些打动😂，那么持续。（打动点比拟低哈）

path 元素的能力

path元素是 SVG 根本形态中最弱小的一个，它不仅能创立其余根本形态，还能创立更多其余形态。

比方矩形（直角矩形或者圆角矩形）、圆形、椭圆、折线形、多边形等。

更重要的是可能绘制一些曲线，如贝塞尔曲线、二次曲线等。

path 元素的形态是通过属性 d 来定义的，d 属性通过“命令和坐标”的序列来管制整个 path 绘制的门路

path 的坐标命令

先采纳总分的模式吧。

  • M = moveto
  • L = lineto
  • H = horizontal lineto
  • V = vertical lineto
  • C = curveto
  • S = smooth curveto
  • Q = quadratic Bézier curve
  • T = smooth quadratic Bézier curveto
  • A = elliptical Arc
  • Z = closepath

而后一个个来介绍次要分为直线命令和曲线命令

直线命令

直线命令次要有以下几种：

  • M（moveto）：须要两个参数（x 轴和 y 轴坐标，挪动到的点的 x 轴和 y 轴的坐标
  • L（lineto）：须要两个参数（x 轴和 y 轴坐标），它会在以后地位和最新的地位（L 后面画笔所在的点）之间画一条线段。
  • H（horizontal lineto）：一个参数，表明在 x 轴挪动到的地位，绘制水平线
  • V（vertical lineto）：一个参数，表明在 y 轴挪动到的地位，绘制垂直线
  • Z（closepath）：从以后点画一条直线到门路的终点

示例：

画一个正方形

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
</svg>

成果：

代码解析：

首先定义了一个 100×100 的画布（坐标系），用 M 命令在（10，10）创立终点，通过 H 命令在程度方向挪动到 x 轴为 90 的地位，y 轴不变，也就是挪动到（90，10），再通过 V 命令挪动到 y 轴为 90 的地位，x 轴不变，也就是坐标为（90，90）的地位，再通过 H 命令在程度方向挪动到 x 轴为 10 的地位，y 轴不变，此刻的地位为（10，90），最初应用 L 命令在终点（10，10）的地位与上次的点（10，90）画一条直线，那么四条边就画完了。

思考？

通过下面的参数和示例能够想到，其实最初的一步有几种方法能够实现

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <!-- 利用 Z 命令 -->
  <path d="M10 10 H 90 V 90 H 10 Z"/>
  <!-- 利用 V 命令 -->
  <path d="M10 10 H 90 V 90 H 10 V 10"/>
</svg>

实现的成果都是一样的，Z 命令是间接从以后点画一条直线到终点，V 利用本次示例中最初一步向垂直方向挪动，所以它也可能做到。

以上所说的是 相对间隔 ，当然还能够应用 绝对间隔 来画，应用 小写字母。

<svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 h 80 v 80 h -80 Z" />
</svg>
曲线命令

C（curveto）三次贝塞尔曲线

三次贝塞尔曲线须要定义一个点和两个控制点，用 C 命令来创立。

(x,y)示意的是曲线的起点，(x1,y1)是终点的控制点，(x2,y2)是起点的控制点。控制点形容的是曲线起始点的斜率，曲线上各个点的斜率，是从终点斜率到起点斜率的突变过程。

命令参数：

C x1 y1, x2 y2, x y 
c dx1 dy1, dx2 dy2, dx dy

示例：

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
</svg>

成果：

代码解释：

用 M 创立一个终点（10，10），C 创立一个以（50，10）为起点，（20，20）为终点的控制点，（40，10）为起点的控制点。

给它加上辅助的点，看成果和代码

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
    <circle cx="130" cy="110" r="2" fill="red"/>
    <circle cx="120" cy="140" r="2" fill="red"/>
    <line x1="130" y1="110" x2="120" y2="140" style="stroke:rgb(255,0,0);stroke-width:2"/>
    <circle cx="180" cy="140" r="2" fill="red"/>
    <circle cx="170" cy="110" r="2" fill="red"/>
    <line x1="180" y1="140" x2="170" y2="110" style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

原理剖析：联合上面的图看一下，曲线沿着终点到第一控制点的方向伸出，逐步蜿蜒，而后沿着第二控制点到起点的方向完结。

S（smooth curveto）简写的三次贝塞尔曲线

S 其实是创立一个非凡的三次贝塞尔曲线。它非凡的中央就是当一个点某一侧的控制点是它另一侧的控制点的对称也就是放弃斜率不变。

(x,y)示意的是曲线的起点，(x2,y2)是既是起点的控制点也是终点的控制点。

命令参数：

S x2 y2, x y
s dx2 dy2, dx dy

示例：

先画一个三次贝塞尔曲线

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 50 C 40 20, 120 20, 150 50" stroke="black" fill="transparent"/>
</svg>

成果：

在三次贝塞尔曲线前面应用简写的三次贝塞尔曲线，应用 S 命令画一个简写的三次贝塞尔曲线。

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 50 C 40 20, 120 20, 150 50 S 260 80, 290 50" stroke="black" fill="transparent"/>
</svg>

成果：

相当于起始点应用上一个三次贝塞尔曲线起点的斜率，按照这个斜率画出了一个镜像的三次贝塞尔曲线。

将辅助点标示进去

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <path d="M 10 50 C 40 20, 120 20, 150 50 S 260 80, 290 50" stroke="black" fill="transparent"/>
    <circle cx="10" cy="50" r="2" fill="red"/>
    <circle cx="40" cy="20" r="2" fill="red"/>
    <line x1="10" y1="50" x2="40" y2="20" style="stroke:rgb(255,0,0);stroke-width:1"/>

    <circle cx="120" cy="20" r="2" fill="red"/>
    <circle cx="150" cy="50" r="2" fill="red"/>
    <line x1="120" y1="20" x2="150" y2="50" style="stroke:rgb(255,0,0);stroke-width:1"/>

    <circle cx="180" cy="80" r="2" fill="blue"/>
    <circle cx="180" cy="80" r="2" fill="red"/>
    <circle cx="260" cy="80" r="2" fill="red"/>
    <line x1="150" y1="50" x2="180" y2="80" style="stroke:blue;stroke-width:1"/>
    <line x1="290" y1="50" x2="260" y2="80" style="stroke:rgb(255,0,0);stroke-width:1"/>
</svg>

成果：

蓝色的线连贯的那个点，其实就是向上一个“借”来的。

留神：如果 S 命令跟在一个 C 命令或者另一个 S 命令的前面，它的第一个控制点，就会被假如成前一个控制点的对称点。如果 S 命令独自应用，后面没有 C 命令或者另一个 S 命令，那么它的两个控制点就会被假如为同一个点。

Q（quadratic Bézier curve）二次贝塞尔曲线

二次贝塞尔曲线 Q，只须要一个控制点，用来确定终点和起点的曲线斜率。因而它须要两组参数，控制点和起点坐标。

Q x1 y1, x y
q dx1 dy1, dx dy

示例：

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 80 Q 95 20 180 80" stroke="black" fill="transparent"/>
</svg>

成果：

它相比三次贝塞尔曲线，只有一个控制点，也就是一个点同时管制终点和起点，将辅助点标出来

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 80 Q 95 20 180 80" stroke="black" fill="transparent"/>
    <circle cx="10" cy="80" r="2" fill="red"/>
    <circle cx="95" cy="20" r="2" fill="red"/>
    <circle cx="180" cy="80" r="2" fill="red"/>
    <line x1="10" y1="80" x2="95" y2="20" style="stroke:rgb(255,0,0);stroke-width:1"/>
    <line x1="95" y1="20" x2="180" y2="80" style="stroke:rgb(255,0,0);stroke-width:1"/>
</svg>

成果：

T（smooth quadratic Bézier curveto）简写的二次贝塞尔曲线

简写的二次贝塞尔曲线 T，只须要一个起点。

T x y
t dx dy

示例：

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 50 10, 90 80 T 170 80" stroke="black" fill="transparent"/>
</svg>

成果：

加上辅助线和点

<svg width="400px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 80 Q 50 10, 90 80 T 170 80" stroke="black" fill="transparent"/>

    <circle cx="10" cy="80" r="2" fill="red"/>
    <circle cx="50" cy="10" r="2" fill="red"/>
    <line x1="10" y1="80" x2="50" y2="10" style="stroke:rgb(255,0,0);stroke-width:1"/>

    <circle cx="90" cy="80" r="2" fill="red"/>
    <line x1="90" y1="80" x2="50" y2="10" style="stroke:rgb(255,0,0);stroke-width:1"/>

    <circle cx="170" cy="80" r="2" fill="blue"/>
    <circle cx="130" cy="150" r="2" fill="blue"/>
    <line x1="90" y1="80" x2="130" y2="150" style="stroke:rgb(0,0,255);stroke-width:1"/>
    <line x1="130" y1="150" x2="170" y2="80" style="stroke:rgb(0,0,255);stroke-width:1"/>
</svg>

成果：

留神：T 命令后面必须是一个 Q 命令，或者是另一个 T 命令，能力达到这种成果。如果 T 独自应用，那么控制点就会被认为和起点是同一个点，所以画进去的将是一条直线。

A（elliptical Arc）弧形

A 命令用于画弧形。

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

参数阐明

  • 弧形命令 A 前两个参数 rx 和 ry 别离是 x 轴半径和 y 轴半径。
  • 弧形命令 A 的第三个参数示意弧形的旋转状况。
  • large-arc-flag 决定弧线是大于还是小于 180 度，0 示意小角度弧，1 示意大角度弧。
  • sweep-flag 示意弧线的方向，0 示意从终点到起点沿逆时针画弧，1 示意从终点到起点沿顺时针画弧。
  • x：完结点 x 坐标。
  • y：完结点 y 坐标。

示例：

<svg width="400px" height="320px" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10"stroke="black"fill="red"stroke-width="2"fill-opacity="0.5"/>
</svg>

成果：

代码解析：

画布上有一条对角线，两头有两个椭圆弧被对角线切开(x radius = 30, y radius = 50)。

第一个椭圆弧的 x -axis-rotation（x 轴旋转角度）是 0，所以弧形所在的椭圆是正置的（没有歪斜）。

在第二个椭圆弧中，x-axis-rotation 设置为 -45，所以这是一个旋转了 45 度的椭圆，并以短轴为分割线，造成了两个对称的弧形。

总结

学习了直线命令，特地是比拟难了解的曲线命令。

绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分。
在 path 元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线 C，和二次贝塞尔曲线 Q。

在这里还要留神简写的贝塞尔曲线应用的前提。最难的当然是弧形了。

当然看到这里，有敌人可能会有疑难，还有必要去学习这个简单 SVG 的画法吗？对于这个问题，其实写这篇文章的目标不是让你手写 SVG，而是了解 SVG 的画法，SVG 大多数都是一些矢量图形工具来制作，然而仔细的你没发现吗，上文的一些操作，不正是应和了咱们应用 AI 等工具绘图的场景吗？

学习终是在脚下，累积也是如此。

感激

万能的网络

门路 -SVG|MDN

以及勤奋的本人，集体博客，GitHub 测试，GitHub

公众号 - 归子莫，小程序 - 小归博客

正文完
svg
发表至： svg
2021-11-11
 0
关于svg:SVG-动画开发实战-SVG-描边动画Stroke
关于svg:在线SVG在线编辑器
关于svg:技术分享即构互动白板音视频同步多端实时互动同步技术实践
关于svg:svg06svg中坐标变换与顺序的关系