如何在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,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) 將從底部到 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>

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 轉換器工具。 還有許多開源站點可用於免費手繪。 例子

• https://shapeshifter.design/
• https://editor.method.ac/

要將 PNG 轉換為 SVG，您可以使用

• https://image.online-convert.com/convert-to-svg
• https://www.pngtosvg.com/