T/t 平滑二次贝塞尔曲线

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

工作原理

T命令自动计算控制点，使其与前一个控制点关于连接点对称。这样就能保证曲线平滑过渡。

<circle cx="50" cy="150" r="4" fill="#2ecc71"/>
<circle cx="100" cy="50" r="4" fill="#e74c3c"/>
<circle cx="150" cy="150" r="4" fill="#2ecc71"/>
<circle cx="200" cy="250" r="4" fill="#9b59b6"/>
<circle cx="250" cy="150" r="4" fill="#2ecc71"/>
<circle cx="300" cy="50" r="4" fill="#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="150" y1="150" x2="100" y2="50" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<line x1="150" y1="150" x2="200" y2="250" stroke="#9b59b6" stroke-width="1" stroke-dasharray="4"/>
<line x1="250" y1="150" x2="200" y2="250" stroke="#9b59b6" stroke-width="1" stroke-dasharray="4"/>
<line x1="250" y1="150" x2="300" y2="50" stroke="#9b59b6" stroke-width="1" stroke-dasharray="4"/>
<line x1="350" y1="150" x2="300" y2="50" stroke="#9b59b6" stroke-width="1" stroke-dasharray="4"/>

<text x="100" y="40" text-anchor="middle" font-size="9" fill="#e74c3c">Q的控制点</text>
<text x="200" y="270" text-anchor="middle" font-size="9" fill="#9b59b6">T自动计算</text>
<text x="300" y="40" text-anchor="middle" font-size="9" fill="#9b59b6">T自动计算</text>

<path d="M 50,150 Q 100,50 150,150 T 250,150 T 350,150" fill="none" stroke="#3498db" stroke-width="2"/>

紫色圆点表示T命令自动计算的控制点。

命令格式

• T x,y：绝对坐标，只需指定终点
• t dx,dy：相对坐标

参数说明

控制点自动计算，无需指定。

基本用法

Q和T配合

<path d="M 30,75 Q 60,20 90,75 T 150,75 T 210,75 T 270,75" fill="none" stroke="#e74c3c" stroke-width="2"/>

对比Q连续和Q+T

<!-- Q连续：每段独立控制 -->
<path d="M 30,75 Q 60,20 90,75 Q 100,130 150,75 Q 160,20 210,75 Q 220,130 270,75" fill="none" stroke="#3498db" stroke-width="2"/>

<!-- Q + T：自动平滑 -->
<path d="M 30,75 Q 60,20 90,75 T 150,75 T 210,75 T 270,75" fill="none" stroke="#e74c3c" stroke-width="2"/>

实际应用

平滑波浪

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

云朵形状

<path d="M 40,80 Q 20,80 20,60 Q 20,40 40,40 Q 50,20 80,20 Q 110,10 130,30 Q 160,20 170,50 Q 190,50 190,70 Q 190,90 160,90 Q 130,100 100,90 Q 70,100 40,80" fill="#ecf0f1" stroke="#bdc3c7" stroke-width="2"/>

简笔鱼

<path d="M 20,50 Q 50,20 100,50 Q 50,80 20,50" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
<path d="M 100,50 Q 130,30 160,50 Q 130,70 100,50" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
<polygon points="160,50 190,30 190,70" fill="#3498db" stroke="#2980b9" stroke-width="2"/>
<circle cx="40" cy="45" r="3" fill="#fff"/>

相对坐标 t

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

T命令的限制

T命令必须跟在Q或T命令后面使用。如果T命令是第一个曲线命令，控制点与起点重合。

<path d="M 30,75 T 150,75 T 270,75" fill="none" stroke="#f39c12" stroke-width="2"/>

Q+T 与 C+S 对比

小结

T命令简化了连续二次曲线的绑制：

• 自动计算控制点，保证平滑过渡
• 必须跟在Q或T命令后面
• 代码简洁，适合简单平滑曲线
• 与Q配合使用效果最佳

掌握Q和T命令，就能快速绑制各种平滑的弧形图形。