如何使用SVG path贝塞尔曲线绘制边缘平滑贴合的气泡形状

问题根因 #

原有路径不贴合参考边缘的核心问题是锚点坐标与参考图关键点偏差较大，且相邻贝塞尔曲线的控制点未与连接点共线，导致曲率突变出现拐角，无法匹配平滑的气泡边缘。

修正后完整代码 #

<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="M318,14 
            C236,22 68,54 48,248
            C66,528 472,532 678,418
            C882,262 748,108 688,108
            C486,118 496,106 468,98
            C418,58 398,18 318,14" 
            style="stroke:#000; stroke-width:3;fill:none;" />
        </svg>
    </div>
</body>
</html>

后续调整技巧 #

• 先在参考图上标记所有边缘拐点作为路径锚点，再根据弧度过渡需求补充中间锚点
• 调整三次贝塞尔控制点时，保证前一段曲线的结束控制点、锚点、后一段曲线的起始控制点三点共线，即可实现平滑无拐点的过渡
• 小曲率弧段可适当减少控制点数量，避免过度调整出现不必要的形变

内容的提问来源于stack exchange，提问作者Kirnc