如何在SVG中绘制S曲线？

Question

请帮我用 SVG 画这样的东西。

  <svg class="slide__overlay" viewbox="0 0 100 100" preserveAspectRatio="none"><path class="slide__overlay-path" d="M0,0 L100,0 C25,50 50,75 0,100z" /></svg>

我从一个老问题中得到了这个代码。但我需要旋转这个。

谢谢

Answer 1

所以最简单的方法就是旋转你的形状：

transform="(-90, 50, 50)"

<svg viewbox="0 0 100 100" width="200" height="200">
  <path transform="rotate(-90, 50, 50)" d="M0,0 L100,0 C25,50 50,75 0,100z"/>
</svg>

但让我向您解释一下路径命令是如何工作的...最后，我们将为您的旋转问题提供更好的解决方案...

那么让我们看看您的路径命令。

"M0,0 L100,0 C25,50 50,75 0,100z"

M0,00,0意味着移动到图像左上角的坐标。

L100,0是命令线，它从当前点 (0,0) 到点 绘制一条线100,0。100向右和0向下是右拐角。

接下来是命令曲线C25,50 50,75 0,100。最后两个数字是您的路径结束的坐标。0,100是你的左下角。然后你就有了两个控制点。为了更好地理解这些，我在原始绘图中的每个坐标处添加了一个圆圈：

<svg viewbox="0 0 100 100" width="200" height="200">
 <path d="M0,0 L100,0 C25,50 50,75 0,100z" opacity="0.5"/>
  <g>
    <line x1="100" y1="0" x2="25" y2="50" stroke="green" stroke-width="0.5"/>
    <circle cx="25" cy="50" r="2" fill="green"/>
 </g>
 <g>
     <line x1="0" y1="100" x2="50" y2="75" stroke="blue" stroke-width="0.5"/>
     <circle cx="50" cy="75" r="2" fill="blue"/>
 </g>
 </svg>

如您所见，控制点决定了曲线端点处的角度以及曲线本身的斜率。

因此，为了旋转曲线，我们再次从端点开始：

左上角 (0,0) 的位置最终将位于左下角 (0,100)。

M0,100

那么命令行将位于左上角L0,0

命令曲线将位于右下角 (100,100)

Cx1,y1 x2,y2 100,100

但在哪里画控制点呢？

你的第一个控制点（25,50）最终将距离底部 25，距离左侧 50，所以在50,75

您的第二个控制点必须位于距右侧 25 处、距底部 50 处。所以在75,50

所以命令曲线如下所示：C50,75 75,50 100,100

总而言之，这是您的旋转路径：

<svg viewbox="0 0 100 100" width="200" height="200">
 <path  d="M0,100 L0,0 C50,75 75,50  100,100z" opacity="0.5" fill="red" />
 <g>
    <line x1="0" y1="0" x2="50" y2="75" stroke="red" stroke-width="0.5"/>
    <circle cx="50" cy="75" r="2" fill="red"/>
 </g>
 <g>
     <line x1="100" y1="100" x2="75" y2="50" stroke="red" stroke-width="0.5"/>
     <circle cx="75" cy="50" r="2" fill="red"/>
 </g>
 </svg>