Z/z 闭合路径

详细介绍SVG路径的Z闭合路径命令，学习如何自动闭合路径形成封闭图形。通过实例掌握Z命令的用法和注意事项。 Z命令用于闭合路径，从当前位置画一条直线回到路径起点。

基本概念

闭合路径就是让路径回到起点，形成一个封闭的图形。Z命令会自动画一条从当前位置到起点的直线。

<text x="250" y="20" text-anchor="middle" font-size="10" fill="#666">已闭合</text>
<path d="M 200,30 L 300,30 L 300,120 L 200,120 Z" fill="none" stroke="#e74c3c" stroke-width="2"/>
<circle cx="200" cy="30" r="4" fill="#2ecc71"/>

<!-- 未闭合：最后一条边需要手动画 -->
<path d="M 30,30 L 170,30 L 170,120 L 30,120" fill="none" stroke="#3498db" stroke-width="2"/>

<!-- 已闭合：Z命令自动画最后一条边 -->
<path d="M 200,30 L 300,30 L 300,120 L 200,120 Z" fill="none" stroke="#e74c3c" stroke-width="2"/>

命令格式

• Z 或 z：闭合路径

Z命令没有参数，大小写效果相同。

基本用法

三角形

<path d="M 100,20 L 180,130 L 20,130 Z" fill="#3498db" stroke="#2980b9" stroke-width="2"/>

矩形

<path d="M 30,30 L 170,30 L 170,120 L 30,120 Z" fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>

五角星

<path d="M 100,20 L 120,80 L 180,80 L 130,115 L 150,175 L 100,140 L 50,175 L 70,115 L 20,80 L 80,80 Z" fill="#f39c12" stroke="#e67e22" stroke-width="2"/>

填充效果

Z命令闭合的路径可以填充颜色。

<text x="225" y="20" text-anchor="middle" font-size="10" fill="#666">填充未闭合路径</text>
<path d="M 180,40 L 270,40 L 270,130 L 180,130" fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>

<!-- 闭合路径填充 -->
<path d="M 30,40 L 120,40 L 120,130 L 30,130 Z" fill="#3498db" stroke="#2980b9" stroke-width="2"/>

<!-- 未闭合路径也会填充（自动闭合） -->
<path d="M 180,40 L 270,40 L 270,130 L 180,130" fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>

注意：即使没有Z命令，fill属性也会自动闭合路径进行填充。但描边不会自动闭合。

曲线闭合

Z命令可以和曲线命令配合使用。

<path d="M 30,100 Q 100,20 170,100 Z" fill="#9b59b6" stroke="#8e44ad" stroke-width="2"/>

心形

<path d="M 100,170 C 40,130 20,70 60,50 C 100,30 100,70 100,70 C 100,70 100,30 140,50 C 180,70 160,130 100,170 Z" fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>

多个子路径

一个path元素可以包含多个闭合的子路径。

<path d="M 30,30 L 80,30 L 80,80 L 30,80 Z M 120,70 L 170,70 L 170,120 L 120,120 Z" fill="#3498db" stroke="#2980b9" stroke-width="2"/>

圆环

<path d="M 100,20 A 80,80 0 1 1 20,100 A 80,80 0 1 1 100,20 Z M 100,50 A 50,50 0 1 0 150,100 A 50,50 0 1 0 100,50 Z" fill="#3498db" stroke="#2980b9" stroke-width="2" fill-rule="evenodd"/>

Z命令的位置

Z命令会回到最近一次M命令定义的起点。

<path d="M 30,30 L 90,30 L 90,90 L 30,90 Z M 120,60 L 180,60 L 180,120 L 120,120 Z" fill="none" stroke="#3498db" stroke-width="2"/>

实际应用

箭头图标

<path d="M 75,20 L 130,75 L 100,75 L 100,130 L 50,130 L 50,75 L 20,75 Z" fill="#3498db" stroke="#2980b9" stroke-width="2"/>

对话框

<path d="M 20,20 L 180,20 L 180,100 L 100,100 L 70,130 L 80,100 L 20,100 Z" fill="#3498db" stroke="#2980b9" stroke-width="2"/>

标签

<path d="M 20,30 L 100,30 L 120,50 L 100,70 L 20,70 Z" fill="#e74c3c" stroke="#c0392b" stroke-width="2"/>
<circle cx="45" cy="50" r="8" fill="#fff"/>

Z与手动闭合的区别

使用Z命令

<path d="M 10,10 L 90,10 L 90,90 L 10,90 Z"/>

• 代码简洁
• 自动闭合
• 语义清晰

手动画线闭合

<path d="M 10,10 L 90,10 L 90,90 L 10,90 L 10,10"/>

• 代码较长
• 需要计算起点坐标
• 适合需要特殊处理的场景

小结

Z命令是路径绑制的重要工具：

• 自动从当前位置画直线到起点
• 没有参数，大小写效果相同
• 配合fill属性形成填充图形
• 支持多个子路径
• 代码简洁，语义清晰

掌握Z命令，就能绑制各种封闭图形。至此，路径命令的学习告一段落，