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>

但是让我向您解释path命令的工作原理...最后，我们将为您的旋转问题提供更好的解决方案...

所以让我们看一下您的路径命令。

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

M0,0表示移动到图像左上角的坐标0,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）将从底部结束，从左端结束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>

Answer 2

为了精确地重复如图所示的曲线形状，需要将图像加载到矢量编辑器中。并沿着轮廓绘制节点

将文件另存为SVG。并仅将路径复制到另一个文件

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  width="100vw" height="100vh"  viewBox="0 0 688 535" preserveAspectRatio="xMinYMin meet">
  
  <path d="m4.8 11.6c0 0 34.3 55.4 56.1 79.3 25.6 28.2 55.7 52.3 86.6 74.5 36.1 26 75.7 46.7 114.6 68.1 26.5 14.5 54 27.3 81 40.9 27 13.6 54.2 26.8 81 40.9 23.2 12.2 46.6 23.9 68.9 37.7 27.6 17 54.9 35 80.1 55.3 25.6 20.6 50.3 42.7 72.1 67.3 13.2 14.9 35.3 48.1 35.3 48.1H4.8Z" style="fill:#5B7E95;stroke:none"/>
</svg>

Answer 3

您可以使用任何可用的在线PNG到SVG转换器工具。另外，还有许多开放源代码站点可用于免费手绘。例子

要将PNG转换为SVG，可以使用

如何在SVG中绘制S曲线？

3 个答案: