绘制路径 path

详细介绍SVG路径path元素的绑制方法，包括d属性、移动命令、线段命令、曲线命令等。通过实际案例掌握路径的各种用法，适合前端开发者学习SVG图形绑制。 路径是 SVG 中最强大的形状元素。<path> 元素可以绑制任意形状，从简单的线条到复杂的曲线都能实现。

基本语法

<path d="命令 参数 命令 参数 ..."/>

属性说明

• d：路径数据，由一系列命令和参数组成

路径命令概览

大写与小写的区别

• 大写：绝对坐标（相对于 SVG 坐标原点）
• 小写：相对坐标（相对于当前画笔位置）

基本路径

移动和线段

<path d="M 20,20 L 100,20 L 100,100 L 20,100 Z" fill="#3498db" fill-opacity="0.5" stroke="#3498db"/>
<path d="M 150,20 L 230,20 L 230,100 L 150,100 Z" fill="none" stroke="#e74c3c"/>
<path d="M 280,20 L 360,20 L 360,100 L 280,100 L 280,20" fill="#2ecc71" fill-opacity="0.5" stroke="#2ecc71"/>

水平和垂直线

<path d="M 20,50 H 100 V 20 H 150 V 80 H 100 V 50" fill="none" stroke="#3498db"/>
<path d="M 200,20 H 300 V 80 H 200 Z" fill="#e74c3c" fill-opacity="0.3" stroke="#e74c3c"/>

曲线路径

二次贝塞尔曲线 Q

<path d="M 220,100 Q 260,20 300,100 T 380,100" fill="none" stroke="#2ecc71" stroke-width="2"/>
<text x="100" y="130" text-anchor="middle" font-size="10" fill="#666">Q命令（控制点）</text>
<text x="300" y="130" text-anchor="middle" font-size="10" fill="#666">T命令（平滑）</text>

<path d="M 20,100 Q 100,20 180,100" fill="none" stroke="#3498db"/>
<path d="M 220,100 Q 260,20 300,100 T 380,100" fill="none" stroke="#2ecc71"/>

三次贝塞尔曲线 C

<path d="M 220,100 C 240,20 280,180 320,100 S 380,20 380,100" fill="none" stroke="#2ecc71" stroke-width="2"/>
<text x="100" y="130" text-anchor="middle" font-size="10" fill="#666">C命令（两个控制点）</text>
<text x="300" y="130" text-anchor="middle" font-size="10" fill="#666">S命令（平滑）</text>

<path d="M 20,100 C 60,20 140,20 180,100" fill="none" stroke="#3498db"/>
<path d="M 220,100 C 240,20 280,180 320,100 S 380,20 380,100" fill="none" stroke="#2ecc71"/>

弧线 A

<path d="M 20,100 A 80,40 0 0 0 180,100" fill="none" stroke="#3498db"/>
<path d="M 220,100 A 80,40 0 0 1 380,100" fill="none" stroke="#e74c3c"/>

实际应用案例

心形

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

箭头

<path d="M 20,50 L 100,50 L 100,30 L 140,50 L 100,70 L 100,50" fill="#3498db"/>
<path d="M 160,50 L 240,50 L 240,30 L 280,50 L 240,70 L 240,50" fill="none" stroke="#e74c3c" stroke-width="2"/>

波浪线

<path d="M 0,50 Q 50,20 100,50 T 200,50 T 300,50 T 400,50" fill="none" stroke="#3498db" stroke-width="2"/>

圆角矩形

<path d="M 30,20 L 270,20 A 10,10 0 0 1 280,30 L 280,70 A 10,10 0 0 1 270,80 L 30,80 A 10,10 0 0 1 20,70 L 20,30 A 10,10 0 0 1 30,20" 
      fill="#3498db" fill-opacity="0.5" stroke="#3498db" stroke-width="2"/>

复杂图形

<path d="M 150,10 L 190,50 L 180,100 L 150,130 L 120,100 L 110,50 Z" 
      fill="#f39c12" stroke="#e67e22" stroke-width="2"/>
<path d="M 150,30 L 170,50 L 165,85 L 150,105 L 135,85 L 130,50 Z" 
      fill="#e67e22"/>

路径长度

<path> 元素有一个 getTotalLength() 方法可以获取路径总长度：

const path = document.querySelector('path');
const length = path.getTotalLength();
console.log('路径长度:', length);

路径优化

简化路径

使用工具优化路径数据：

• SVGO：SVG 优化工具 -在线工具：SVG Optimizer

使用相对坐标

相对坐标可以减少数字位数：

<path d="M 100,100 L 150,100 L 150,150 L 100,150 Z"/>
<path d="M 100,100 l 50,0 l 0,50 l -50,0 z"/>

常见问题

Q: 路径不显示？

A: 检查以下几点：

• d 属性格式是否正确
• 是否设置了 fill 或 stroke
• 命令参数是否完整

Q: 如何调试路径？

A: 使用浏览器开发者工具，或者给路径添加明显的描边颜色。

Q: 路径太复杂怎么办？

A: 使用设计工具导出路径，或者用 JavaScript 库生成。

小结

路径是 SVG 中最强大的形状元素，通过 d 属性的各种命令可以绑制任意形状。掌握 M、L、C、Q、A 等基本命令是使用路径的关键。对于复杂路径，建议使用设计工具导出或 JavaScript 库生成。