路径 ( path )

除了“形状”相关的 CSS 函数可以搭配 CSS 的动画或裁切效果，也可以透过“路径”相关 CSS 函数 path()，绘制类似 SVG 曲线的效果，让裁切的形状或动画路径产生更多与众不同的效果，这篇教学会介绍如何绘制路径，以及 path() 的用法。

延伸阅读：CSS 形状与线段 ( 函数类型 )

快速导览：

• 认识路径 path
• 绘制路径并产生程序码
• 搭配 clip-path 裁切元素
• 搭配 offset-path 产生动画

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

认识路径 path

path 是绘制 SVG 图形的基本元素，透过 path 几乎可以组成所有的形状 ( 贝兹曲线、直线、封闭形状等 )，如果使用浏览器打开一张 SVG 图片后检视源代码，就会看到源代码中具有 path 的元素。

从源代码中可以看到 path 有许多的指令和参数，参数小写表示相对座标，参数大写表示绝对座标，下方列出这些参数的说明。

绘制路径并产生程序码

虽然可以透过指令和参数绘制路径形状，但通常都是利用“向量绘图软件”来绘制 ( 几乎不会有人直接写程序码 )，绘制路径的软件首推 Adobe Illustrator，透过“钢笔工具”就可以轻松绘制路径，但如果没有相关软件，也可以使用“Vectorpea”这个免费的线上 Illustrator 进行绘制路径，点击下方链接，就可以打开 Vectorpea。

打开 Vectorpea：https://www.vectorpea.com/

打开 Vectorpea 之后，点击“新增专案”，建立一个尺寸为 300x300 的空白文件，尺寸可以按照个人需求调整，不过因为是网页动画图片，建议不需要太大尺寸 ( 使用 Illustrator 也是同样做法 )。

使用左侧“钢笔 Pen”工具，在画布中点击绘制路径，单纯点击可以产生直线 ( 使用 Illustrator 也是同样做法 )。

如果点击时压着鼠标不放，就可以绘制贝兹曲线 ( 使用 Illustrator 也是同样做法 )。

编辑路径后，用鼠标拖拉节点调整钮就能调整贝兹曲线形状，连续点击节点就能变成“尖角”或“圆角” ( 使用 Illustrator 也是同样做法 )。

绘制完成后，从左上选单 File 里选择“Export as > SVG”，将文件输出为 SVG 格式 ( 勾选 minify )。

使用浏览器打开 SVG 观察源代码，就可以看见 SVG 的 path 元素，当中的 d 参数就是路径，进行到这个步骤后就已经完成了路径绘制。

搭配 clip-path 裁切元素

通常产生一段“封闭”路径后，会搭配 clip-path 裁切出特定的形状，进而在网页中产生特殊效果，使用时注意单纯使用 path() 时“无法缩放”，得要精准确定尺寸，如果要缩放尺寸需要搭配 url 读取 SVG 的 path，下方范例会展示运用两种不同路径产生的裁切效果。

• 参考：裁切路径 clip-path
• 线上展示：https://codepen.io/oxxo/pen/yyBvoWg

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 250px;
    height: 300px;
    float: left; 
  }
  .a {
    clip-path: path("m35 11c-30.1 10.9-41.8 95.7-7 131 34.8 35.3 79 31.6 46 64-33 32.4 101.2 114.2 118 32 16.8-82.2 47.8-158.9-28-136-75.8 22.9-128.6 28.1-82-17 46.6-45.1 14.5-96.3-47-74z");
    background: url("https://steam.oxxostudio.tw/image/index-css.jpg");
  }
  .b {
    clip-path: path("m65.6 82q3.2-4.6 10.9-11 7.9-6.4 17-10.6 12.9-5.9 24.4-6.5 11.8-1.1 18.3 5.6 10.8 11.3 24.4 26.6 13.5 15.3 27.7 31.9 14.1 16.4 27.8 32.6 13.5 15.9 23.9 28.3-1.4 5-6.5 10.2-5.3 4.9-13.8 8.8-6.2 2.9-11 3.8-4.6 0.9-8.4 0.2-3.5-0.9-6.9-3.4-3.1-2.7-6.4-6.5l-12.8-15.6-46.7 21.4q1.5 8.7 3.3 17.9 1.7 9.2 3.2 17.9-3 2.9-6.7 5.8-3.5 2.6-9.2 5.2-13.1 6-21.6 4.6-8.3-1.8-12-9.8-1.7-3.6-2.3-7.7-0.6-4.1-1.6-9.5-1.4-7.8-3-19.6-1.4-11.8-3-25.5-1.7-13.9-3.1-28.5-1.4-14.7-2.6-27.5-1.4-13.2-2.3-23.4-0.7-10.3-1-15.7zm47.8 18.3l-1.6 0.7q1.4 12.5 2.9 28.1 1.7 15.1 4.3 30.4l32-14.6q-10-12.3-19.9-23.7-9.8-11.7-17.7-20.9z");
    background: linear-gradient(45deg, red, yellow);
  }
</style>

搭配 offset-path 产生动画

path() 也很常搭配 CSS 动画样式属性 animation，让元素的动画能根据指定的路径移动，动画样式支援“封闭”与“开放”路径，下方范例会展示运用两种不同路径产生的裁切效果，并额外使用 SVG 放在下层凸显移动路径。

• 参考：CSS 动画 animation、自订动画路径 offset
• 线上展示：https://codepen.io/oxxo/pen/ZYzrJNy

<!-- HTML 程式碼 -->
<div class="a">
  <svg viewBox="0 0 300 300"><path fill="none" stroke="#000" stroke-miterlimit="10" d="m35 11c-30.1 10.9-41.8 95.7-7 131 34.8 35.3 79 31.6 46 64-33 32.4 101.2 114.2 118 32 16.8-82.2 47.8-158.9-28-136-75.8 22.9-128.6 28.1-82-17 46.6-45.1 14.5-96.3-47-74z"/></svg>
  <div></div>
</div>
<div class="b">
  <svg viewBox="0 0 300 300"><path fill="none" stroke="#000" stroke-miterlimit="10" d="m148.9 281.8c-64.5-11.6-95.1-36.8-119.4-88.4-24.3-51.6 5-110.8 53.9-144.8 48.9-34 105.6-37.6 154 8 32 30.1 33.6 80.3 28.9 100-10.8 46-33.7 57.4-62 70-36.7 16.3-76.4 15.6-111.6-21.2-16.5-17.3-23.7-63.6-6.6-90.9 14.2-22.8 56-58.8 87.3-47.9 31.4 11 39.3 29.6 50.6 57.1 9.3 22.7-10.3 48.4-44.2 63.2-34 14.7-58.7-13.3-57-29.3 4.5-41.6 46.4-33.7 46.4-33.7"/></svg>
  <div></div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    position: relative;
    width: 300px;
    height: 300px;
    float: left;
  }
  .b {margin-left: -60px;}
  div div {
    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    background: red;
    float: none;
  }
  .a div {
    offset-path: path("m35 11c-30.1 10.9-41.8 95.7-7 131 34.8 35.3 79 31.6 46 64-33 32.4 101.2 114.2 118 32 16.8-82.2 47.8-158.9-28-136-75.8 22.9-128.6 28.1-82-17 46.6-45.1 14.5-96.3-47-74z");
    animation: oxxo 2s infinite linear;
  }
  .b div {
    offset-path: path("m148.9 281.8c-64.5-11.6-95.1-36.8-119.4-88.4-24.3-51.6 5-110.8 53.9-144.8 48.9-34 105.6-37.6 154 8 32 30.1 33.6 80.3 28.9 100-10.8 46-33.7 57.4-62 70-36.7 16.3-76.4 15.6-111.6-21.2-16.5-17.3-23.7-63.6-6.6-90.9 14.2-22.8 56-58.8 87.3-47.9 31.4 11 39.3 29.6 50.6 57.1 9.3 22.7-10.3 48.4-44.2 63.2-34 14.7-58.7-13.3-57-29.3 4.5-41.6 46.4-33.7 46.4-33.7");
    animation: oxxo 2s infinite linear alternate;
  }
  @keyframes oxxo {
    0% {offset-distance: 0%;}
    100% {offset-distance: 100%;}
  }
</style>

小结

对于 clip-path 和 animation 而言，path() 是一个相当实用的 CSS 函数，虽然没有办法完全做到 SVG 的功能 ( 缩放、变形等 )，但也能实现各式各样不同形状路径的效果，如果网页中有使用动画或裁切效果，不妨应用 path() 来完成更多有趣的创意。

意见反馈