Q/q 二次贝塞尔曲线

详细介绍SVG路径的Q二次贝塞尔曲线命令，包括单控制点原理、绝对坐标和相对坐标的用法。通过实例掌握二次贝塞尔曲线的绑制技巧。 二次贝塞尔曲线只有一个控制点，比三次贝塞尔曲线更简单，适合绑制简单的弧形。

二次与三次的区别

三次贝塞尔曲线有两个控制点，可以绑制S形曲线。二次贝塞尔曲线只有一个控制点，只能绑制单向弯曲的弧形。

<text x="300" y="20" text-anchor="middle" font-size="12" fill="#666">三次贝塞尔曲线（C）</text>
<path d="M 230,150 C 260,30 340,30 370,150" fill="none" stroke="#e74c3c" stroke-width="2"/>
<circle cx="230" cy="150" r="4" fill="#2ecc71"/>
<circle cx="260" cy="30" r="4" fill="#e74c3c"/>
<circle cx="340" cy="30" r="4" fill="#e74c3c"/>
<circle cx="370" cy="150" r="4" fill="#2ecc71"/>
<line x1="230" y1="150" x2="260" y2="30" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>
<line x1="370" y1="150" x2="340" y2="30" stroke="#e74c3c" stroke-width="1" stroke-dasharray="4"/>

<!-- 二次贝塞尔曲线 -->
<path d="M 30,150 Q 100,30 170,150" fill="none" stroke="#3498db" stroke-width="2"/>

<!-- 三次贝塞尔曲线 -->
<path d="M 230,150 C 260,30 340,30 370,150" fill="none" stroke="#e74c3c" stroke-width="2"/>

命令格式

• Q x1,y1 x,y：绝对坐标
• q dx1,dy1 dx,dy：相对坐标

参数说明

基本用法

简单弧形

<path d="M 30,120 Q 150,20 270,120" fill="none" stroke="#3498db" stroke-width="2"/>

控制点位置的影响

<path d="M 30,75 Q 150,10 270,75" fill="none" stroke="#3498db" stroke-width="2"/>
<path d="M 30,75 Q 150,75 270,75" fill="none" stroke="#e74c3c" stroke-width="2"/>
<path d="M 30,75 Q 150,140 270,75" fill="none" stroke="#2ecc71" stroke-width="2"/>

相对坐标 q

<path d="M 30,75 q 120,-65 240,0" fill="none" stroke="#9b59b6" stroke-width="2"/>

实际应用

叶子形状

<path d="M 100,180 Q 40,100 100,20 Q 160,100 100,180" fill="#2ecc71" stroke="#27ae60" stroke-width="2"/>
<line x1="100" y1="180" x2="100" y2="20" stroke="#27ae60" stroke-width="1"/>

简单花瓣

<path d="M 100,100 Q 60,60 100,20 Q 140,60 100,100" fill="#e74c3c" stroke="#c0392b" stroke-width="1"/>
<path d="M 100,100 Q 140,60 180,100 Q 140,140 100,100" fill="#e74c3c" stroke="#c0392b" stroke-width="1"/>
<path d="M 100,100 Q 140,140 100,180 Q 60,140 100,100" fill="#e74c3c" stroke="#c0392b" stroke-width="1"/>
<path d="M 100,100 Q 60,140 20,100 Q 60,60 100,100" fill="#e74c3c" stroke="#c0392b" stroke-width="1"/>
<circle cx="100" cy="100" r="10" fill="#f39c12"/>

弧形箭头

<path d="M 30,120 Q 100,20 170,120" fill="none" stroke="#3498db" stroke-width="2"/>
<polygon points="170,120 155,110 160,125" fill="#3498db"/>

对话框尾巴

<rect x="20" y="20" width="160" height="80" rx="10" fill="#3498db"/>
<path d="M 50,100 Q 30,130 60,120" fill="#3498db"/>

连续曲线

连续使用Q命令绑制曲线，每个控制点独立控制一段曲线。

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

Q与C的选择

小结

二次贝塞尔曲线的特点：

• 只有一个控制点，更简单直观
• 适合绑制单向弯曲的弧形
• 代码比三次贝塞尔曲线更短
• 无法绑制S形曲线

Q命令适合简单图形和快速原型设计。