Question

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

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

请看我的代码笔：

<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>

任何帮助将不胜感激。

Answer 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>

SVG路径贝塞尔曲线

1 个答案: