Question

我知道如何创建一个向下弯曲的svg路径。但我试图反转曲线（即使曲线向上）。

我不确定是否有一个属性可以反转曲线...... invert="true"？或者我需要重新计算坐标。

以下是我的'downard'曲线示例。我希望将此反转。

<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none" style="width: 100%;">
    <path class="header-base" d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black"></path>
</svg>

Answer 1

Q命令中的第一个参数设置曲线的控制点。

由于曲线从0,40开始并在500,40结束，因此y基数为40。低于该值的任何值（例如，20）将向上设置控制点并使曲线弯曲。较低的值会使曲线向上移动。

＆＃13;

<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none" style="width: 100%;">
    <path class="header-base" d="M0,0 L0,40 Q250,20 500,40 L500,0 Z" fill="black"></path>
</svg>

＆＃13;

反转SVG曲线

1 个答案: