如何使用曲线 SVG 绘制小路径答案

【问题标题】：How to draw Small Path with curve SVG如何使用曲线 SVG 绘制小路径
【发布时间】：2021-10-29 02:32:55
【问题描述】：

如何用曲线画一条小路，这是我试过的代码。

直线路径

<path d="M0,6 H30" stroke="#333" stroke-width="1.5"></path>

等长的曲线路径

<path d="M0,6 Q5,10 15,H30" stroke="#333" stroke-width="1.5"></path>

弯曲的路径不起作用

【问题讨论】：

对于 Q 命令，您需要 4 个值。你只有 3 个
除此之外，逗号只允许分隔两个数字，因此 15，H 无效。

标签： svg charts path

【解决方案1】：

您需要为二次曲线算子 Q 提供 4 个参数。您只提供 3 个参数并且应该删除逗号 - 并不是说您不能使用逗号，但如果使用错误，它们可能会导致错误。这是一个在曲线的起点和终点之间绘制二次曲线和直线的示例：

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 80 Q 95 10 180 80 H 10" stroke="black" fill="transparent"/>
</svg>

查看SVG Path Tutorial 并搜索二次曲线。

【讨论】：

【解决方案2】：

Q 路径命令后面需要有两组坐标。这意味着四个数字。你的路径只有三个数字。

【讨论】：