SVG路径贝塞尔曲线答案

【问题标题】：SVG path bezier curveSVG路径贝塞尔曲线
【发布时间】：2021-09-10 01:11:38
【问题描述】：

我正在尝试创建一个与图像气泡相匹配的形状，但是我似乎无法让它平滑地拟合边缘。

我尝试过使用具有多个坐标的二次和三次。

请看我的codepen：

<html>
    <head>
<style>
img
{
    width:800px;
    position: absolute;
    z-index: -9;

}

svg
{
    height:800px;
    width:100%;
}


</style>
    </head>

    <body>
        <div class="test">
        <img src="https://e-bug.eu/images/backgrounds/testshape2.png" />

        <svg>
        <path d="M320,15 
        C240,25 70,50 50,250
        C70,530 475,530 680,420
        C885,260 750,110 690,110
        C490,120  500,110 470,100
        C420,60 420,60 420,60
        Q390,20 320,15 
                    
        " 
        style="stroke:#000; stroke-width:3;fill:none;" />
    </svg>
</div>



    </body>
</html>

任何帮助将不胜感激。

【问题讨论】：

您是手动创建路径吗？如果您将图像加载到矢量编辑器（Illustrator、Inkscape 等）中并使用其绘图工具来绘制路径，您将会有更好的运气。
@PaulLeBeau 我不知道该感谢你还是恨你哈哈......我花了 5 天时间试图获得确切的形状，而你刚刚向我展示了如何导出它。你是一个传奇。非常感谢。

标签： svg

【解决方案1】：

以下 SVG 将起作用，只需根据您的需要更改大小

 <svg width="3958" height="2905" viewBox="0 0 3958 2905" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3958 0H0V2905H3958V0ZM1510 85.5C1062.83 119.5 183.6 421.4 244 1357C306.833 1683.83 635.1 2348.3 1445.5 2391.5C2106.33 2459.67 3506.7 2385.9 3821.5 1545.5C3934.83 1206.17 3976.1 531.8 3234.5 549C2942.83 591.667 2314 606.5 2132 324.5C2025.33 226.996 1751.6 42.6899 1510 85.5Z" fill="#FF0000"/>
</svg>

【讨论】：