S/s 平滑三次贝塞尔曲线

详细介绍SVG路径的S平滑三次贝塞尔曲线命令，学习如何简化连续曲线的绑制。通过实例掌握S命令与C命令的配合使用。 S命令是C命令的简化形式，用于绑制平滑连接的三次贝塞尔曲线。

为什么需要S命令

绑制连续曲线时，每条曲线都需要两个控制点。为了让曲线平滑过渡，第二个控制点必须与前一条曲线的第一个控制点对称。S命令自动处理这个对称关系。

C命令的重复劳动

<path d="M 30,75 C 60,20 90,130 120,75 C 150,20 180,130 210,75 C 240,20 270,130 300,75" fill="none" stroke="#3498db" stroke-width="2"/>

注意看，每条曲线的第二个控制点（如90,130）和下一条曲线的第一个控制点（150,20）是关于连接点对称的。S命令可以省略第一个控制点。

命令格式

• S x2,y2 x,y：绝对坐标，只需指定第二个控制点和终点
• s dx2,dy2 dx,dy：相对坐标

参数说明

第一个控制点自动计算为前一个控制点的镜像。

基本用法

C和S配合使用

<path d="M 30,75 C 60,20 90,130 120,75 S 180,20 210,75 S 270,130 300,75" fill="none" stroke="#e74c3c" stroke-width="2"/>

S命令的工作原理

<circle cx="50" cy="150" r="4" fill="#2ecc71"/>
<circle cx="100" cy="50" r="4" fill="#e74c3c"/>
<circle cx="150" cy="50" r="4" fill="#e74c3c"/>
<circle cx="200" cy="150" r="4" fill="#2ecc71"/>
<circle cx="250" cy="250" r="4" fill="#e74c3c"/>
<circle cx="300" cy="250" r="4" fill="#9b59b6" stroke="#9b59b6"/>
<circle cx="350" cy="150" r="4" fill="#2ecc71"/>

<line x1="50" y1="150" x2="100" y2="50" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<line x1="200" y1="150" x2="150" y2="50" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<line x1="200" y1="150" x2="250" y2="250" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<line x1="350" y1="150" x2="300" y2="250" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>

<text x="75" y="40" text-anchor="middle" font-size="9" fill="#e74c3c">控制点1</text>
<text x="150" y="40" text-anchor="middle" font-size="9" fill="#e74c3c">控制点2</text>
<text x="250" y="270" text-anchor="middle" font-size="9" fill="#e74c3c">控制点2</text>
<text x="300" y="270" text-anchor="middle" font-size="9" fill="#9b59b6">自动计算的控制点1</text>

<path d="M 50,150 C 100,50 150,50 200,150 S 300,250 350,150" fill="none" stroke="#3498db" stroke-width="2"/>

紫色圆点表示S命令自动计算的控制点，它是前一个控制点关于连接点的镜像。

实际应用

平滑波浪

<path d="M 0,50 C 25,20 50,20 75,50 S 125,80 150,50 S 200,20 225,50 S 275,80 300,50" fill="none" stroke="#3498db" stroke-width="2"/>

对话气泡

<path d="M 30,30 C 30,20 170,20 170,30 L 170,90 C 170,100 30,100 30,90 L 30,60 L 15,75 L 30,60 L 30,30" fill="#3498db" stroke="#2980b9" stroke-width="2"/>

流动曲线

<path d="M 20,100 C 50,30 80,30 110,100 S 170,170 200,100 S 260,30 280,100" fill="none" stroke="#e74c3c" stroke-width="3" stroke-linecap="round"/>
<path d="M 20,100 C 50,70 80,70 110,100 S 170,130 200,100 S 260,70 280,100" fill="none" stroke="#3498db" stroke-width="3" stroke-linecap="round"/>
<path d="M 20,100 C 50,90 80,90 110,100 S 170,110 200,100 S 260,90 280,100" fill="none" stroke="#2ecc71" stroke-width="3" stroke-linecap="round"/>

相对坐标 s

<path d="M 30,75 c 30,-55 60,55 90,0 s 60,-55 90,0 s 60,55 90,0" fill="none" stroke="#9b59b6" stroke-width="2"/>

S命令的限制

S命令必须跟在C或S命令后面使用，因为需要前一个控制点来计算镜像。如果S命令是路径的第一个曲线命令，它会被当作C命令处理，第一个控制点与起点重合。

<path d="M 30,75 S 90,20 150,75 S 210,130 270,75" fill="none" stroke="#f39c12" stroke-width="2"/>

C与S对比

小结

S命令简化了连续曲线的绑制：

• 自动计算第一个控制点，保证曲线平滑过渡
• 必须跟在C或S命令后面使用
• 减少代码量，提高可读性
• 适合绑制波浪、流动等连续曲线

结合C和S命令，可以高效地绑制各种复杂的平滑曲线图形。