这里面我们再添加一种情况，就是设置两个水平的控制节点，来看看线段是如何变化的
<path d="M10 10 C 10 10, 40 10, 50 10" stroke="black" fill="transparent"/>
通过S指令能生成和上述示例中同样的平滑曲线，使用S指令分为以下两种情况
- S指令跟在C或者另一个S指令之后：那S指令的开始控制节点就是基于前一个控制节点的对称点，并且S指令指定的第一组节点是结束控制节点
- 单独的S指令：两个控制节点会被设置为同一个点
比如如下代码
<svg xmlns="http://www.w3.org/2000/svg" width="190" height="160" > <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> <circle cx="10" cy="80" r="2" fill="red"/> <circle cx="95" cy="80" r="2" fill="red"/> <circle cx="180" cy="80" r="2" fill="red"/> <circle cx="150" cy="150" r="2" fill="red"/> </svg>
我们通过不断改变S的第一组节点来看图形的变化趋势
我们可以看到，随着不断给S指令结束控制节点的横坐标累加，曲线会向右偏移。
接下来看下S指令前面没有其他C或者S指令的情况,代码如下
<svg
xmlns="http://www.w3.org/2000/svg"
width="300"
height="300"
>
<path d="M10 80 S 95 150, 180 80" stroke="black" fill="transparent"/>
<circle cx="10" cy="80" r="2" fill="red"/>
<circle cx="95" cy="150" r="2" fill="red"/>
</svg>
内容版权声明：除非注明，否则皆为本站原创文章。