TNotes.svg

Appearance

to top

0048. 认识 path 元素 ​

  • 在学习 path 的相关内容之前，先对 path 有个初步的认知，知道它都能用来干啥。
  • path 这玩意儿有点儿骚，因为它绘制的是路径，这个路径可以是直的也可以是弯的，可以是任意形状，也就是说几乎没有 path 不能绘制的图形。
  • 因此，在众多 svg 元素中，<path> 的参数也是最为复杂的。文中提到了不少关键字，这些关键字在后续的 demo 中大多都会结合实际的示例来介绍。要理解关键字，可以把切入点放在关键字的全称上，把英文单词先给看懂，知道每个关键字对应的英文全称是什么。

1. 📒 近乎万能的 path ​

<path> 元素是 SVG（可缩放矢量图形）中最强大和最常用的绘图元素之一。它允许你定义复杂的形状，通过一系列的命令来绘制路径。这些路径可以用来创建线条、曲线、多边形等 几乎任何类型的二维图形。

2. 📒 path 中一些常用的命令 ​

常用的命令：

  • M (moveto) - 移动到一个新的点，不绘制线条。
  • L (lineto) - 从当前点绘制一条直线到新的点。
  • H (horizontal lineto) - 水平线到新的 x 坐标。
  • V (vertical lineto) - 垂直线到新的 y 坐标。
  • C (cubic Bezier curve) - 通过两个控制点创建三次贝塞尔曲线到新的点。
  • S (smooth cubic Bezier curve) - 连续的三次贝塞尔曲线，第一个控制点是前一个曲线的反射。
  • Q (quadratic Bezier curve) - 通过一个控制点创建二次贝塞尔曲线。
  • T (smooth quadratic Bezier curve) - 连续的二次贝塞尔曲线，控制点是前一个曲线的反射。
  • A (elliptical Arc) - 从当前点创建一个椭圆弧到新的点。
  • Z (closepath) - 关闭当前的路径，返回到路径的起点。

使用这些命令，你可以创建如下图形：

  • 直线和多边形：使用 M 和 L 命令可以绘制简单的直线和任意的多边形。
  • 曲线图形：使用 C 和 Q 命令，可以创建复杂的曲线图形，如心形、花瓣等。
  • 圆和椭圆：使用 A 命令可以创建圆形和椭圆形。
  • 复杂组合图形：通过组合上述命令，可以绘制更复杂的图形，如地图轮廓、动漫角色等。

3. 📒 手写 SVG 与设计软件导出 SVG 的区别及适用场景 ​

  • 手写 SVG
    • 需要知道，在项目中需要手写 svg 的场景并不多。
    • 如果你对元素的结构有比较严格的要求，比如你需要绑定一些事件，或者细粒度地控制某个区域的状态（比如颜色），这时你可能才需要手写 svg。
    • 我们学习 path，主要也是用来绘制一些相对比较简单的路径，过于复杂的图像如果要单独去手写 .svg，可能会写傻掉的。
  • 设计软件导出的 SVG
    • 更多时候，都是通过一些设计软件来制作 svg，当做图片素材引入到项目中。
    • 不要尝试去看设计软件导出的 .svg 的代码，其中大多是由 <path> 元素来绘制的，那不是人看的玩意儿，可以说 <path> 非常强大，它可以绘制任意路径，但是如果整个图就一个 <path> 搞定，那结构是很单一的，想要在某些区域绑定事件就不那么方便了。

4. 💻 demos.1 - 来看一个由 path 制作的 react logo 的 svg 源码 ​

xml
<svg t="1733711817638" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1597"
    width="200" height="200">
    <path d="M112.981333 498.261333c-44.288-77.226667-53.290667-149.504-21.802666-203.989333 42.154667-73.045333 147.968-98.56 281.770666-74.197333a13.738667 13.738667 0 1 1-4.906666 27.008c-123.733333-22.528-218.069333 0.213333-253.098667 60.928-25.813333 44.672-18.048 107.050667 21.845333 176.64a13.738667 13.738667 0 1 1-23.808 13.653333z m636.586667-258.944c78.293333 1.024 134.656 25.429333 160.042667 69.376 34.986667 60.544 7.68 153.386667-73.301334 249.045334a13.738667 13.738667 0 1 0 20.906667 17.749333c87.637333-103.509333 118.229333-207.616 76.16-280.533333-30.976-53.632-96.426667-81.92-183.424-83.072a13.738667 13.738667 0 1 0-0.341333 27.434666z m-79.104 650.197334a13.738667 13.738667 0 0 0-18.858667 4.693333c-39.850667 66.261333-88.746667 102.357333-139.093333 102.357333-70.058667 0-136.874667-70.272-179.2-188.501333a13.738667 13.738667 0 1 0-25.856 9.258667C353.237333 945.237333 428.202667 1024 512.426667 1024c61.44 0 118.314667-41.898667 162.688-115.626667a13.738667 13.738667 0 0 0-4.693334-18.858666z m313.856-110.677334a65.706667 65.706667 0 0 1-103.936 53.333334c-104.746667 61.653333-304.896 30.293333-493.226667-78.506667-80.213333-46.293333-150.485333-102.058667-204.586666-161.493333a13.738667 13.738667 0 1 1 20.309333-18.474667c52.138667 57.301333 120.192 111.317333 197.973333 156.202667 177.792 102.656 364.928 133.12 460.672 81.322666a65.706667 65.706667 0 1 1 122.794667-32.384z m-813.312 0a65.706667 65.706667 0 1 1-97.493333-57.386666c-9.941333-122.752 119.04-287.317333 314.026666-399.872 80.981333-46.762667 165.290667-79.957333 244.522667-96.896a13.738667 13.738667 0 0 1 5.76 26.794666c-76.373333 16.384-157.994667 48.512-236.586667 93.866667-183.637333 106.026667-304.981333 258.858667-300.714666 368.085333 1.621333-0.128 3.2-0.256 4.821333-0.256 36.266667 0 65.706667 29.44 65.706667 65.706667zM446.805333 65.706667a65.706667 65.706667 0 0 1 131.328 0c0 0.981333-0.085333 1.92-0.128 2.858666 108.757333 56.192 184.32 247.893333 184.32 469.461334 0 91.093333-12.714667 178.517333-36.437333 254.293333a13.738667 13.738667 0 1 1-26.197333-8.192c22.869333-73.045333 35.2-157.738667 35.2-246.101333 0-208.64-69.376-388.053333-164.138667-442.154667a65.621333 65.621333 0 0 1-123.946667-30.165333z m55.637334 425.856a47.530667 47.530667 0 1 0 20.053333 92.928 47.530667 47.530667 0 0 0-20.053333-92.928z"
        p-id="1598" fill="#9feaf9"></path> 
</svg>
  • 全程就一个 <path> 完事儿。
  • 这玩意儿不是人手写出来的，而是借助设计软件导出的资源，其中的数值也都是由设计软件通过计算自动生成的。