如何绘制带尖锐端点的SVG贝塞尔曲线？

方案1：用贝塞尔曲线直接构造尖锐端点 #

贝塞尔曲线本身可以实现尖锐端点，核心是让相邻贝塞尔段在连接点的控制点落在该点的同一直线上，这样曲线在连接位置不会平滑过渡，自然形成尖锐的角。

下面是使用svgwrite（Python常用SVG库）的示例代码：

import svgwrite

# 创建SVG画布
dwg = svgwrite.Drawing('sharp_bezier.svg', size=('400px', '300px'))

# 定义带中间尖锐点的路径：两段二次贝塞尔曲线在(200,150)处形成尖角
# 第一段：起点(50,150)，控制点(100,50)，终点(200,150)
# 第二段：起点(200,150)，控制点(300,250)，终点(350,150)
path_data = "M50,150 Q100,50 200,150 Q300,250 350,150"
dwg.add(dwg.path(d=path_data, stroke='black', stroke_width=8, fill='none'))

# 保存SVG文件
dwg.save()

方案2：用属性/CSS修改路径首尾端点为尖锐样式 #

如果是路径的首尾端点需要尖锐效果，不需要修改贝塞尔曲线本身，直接设置SVG的stroke-linecap属性即可。该属性有三个可选值：

• butt：默认值，尖锐平切的端点（就是你需要的效果）
• round：圆形端点
• square：方形延伸端点

内联属性示例 #

import svgwrite

dwg = svgwrite.Drawing('sharp_endpoints.svg', size=('400px', '300px'))

# 带尖锐首尾端点的贝塞尔曲线
path_data = "M50,100 C100,200 300,50 350,100"
dwg.add(dwg.path(
    d=path_data,
    stroke='red',
    stroke_width=12,
    fill='none',
    stroke_linecap='butt'  # 关键属性
))

# 对比：圆形端点的曲线
dwg.add(dwg.path(
    d="M50,200 C100,300 300,150 350,200",
    stroke='blue',
    stroke_width=12,
    fill='none',
    stroke_linecap='round'
))

dwg.save()

CSS批量设置示例 #

import svgwrite

dwg = svgwrite.Drawing('sharp_endpoints_css.svg', size=('400px', '300px'))

# 添加CSS样式块
dwg.defs.add(dwg.style("""
    .sharp-path {
        stroke: green;
        stroke-width: 10;
        fill: none;
        stroke-linecap: butt;
    }
"""))

# 使用定义好的样式类
dwg.add(dwg.path(d="M50,150 C150,50 250,250 350,150", class_='sharp-path'))

dwg.save()

关键提示 #

• stroke-linecap仅作用于路径的首尾端点，如果需要路径中间出现尖锐拐点，必须通过贝塞尔曲线的控制点构造实现（如方案1）。
• 确保曲线连接点的相邻控制点与连接点共线，才能形成无平滑过渡的尖角。

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