小试SVG之新手小白入门教程(6)
另一种曲线是二次贝塞尔曲线（quadratic curve）
它通过指令Q来来进行描述，相较于三次贝塞尔曲线，它更为简单。
Q：只需要指定两组参数，第一组表示控制节点的坐标，第二组表示终点坐标。
示例：
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" > <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> <circle cx="10" cy="80" r="2" fill="red"/> <circle cx="95" cy="20" r="2" fill="red"/> <circle cx="180" cy="80" r="2" fill="red"/> </svg>
和三次贝塞尔类似，二次贝塞尔也提供了快捷的玩法，那就是T指令
T：通过找到前一个控制节点，来推断出一个新的控制点，T指令后面只需要指定一组结束点坐标即可，由于T指令是基于前一个控制点的基础上来生成的，所以T指令之前必须要有Q指令或者其他T指令，否则生成的控制节点就和前一个控制节点就会重合，在画布上看到的就仅仅是一条直线。
示例：
<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="300"
>
<path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
<circle cx="10" cy="80" r="2" fill="red"/>
<circle cx="52.5" cy="10" r="2" fill="red"/>
<circle cx="95" cy="80" r="2" fill="red"/>
<circle cx="180" cy="80" r="2" fill="red"/>
</svg>
内容版权声明：除非注明，否则皆为本站原创文章。