如何对SVG线条进行平滑处理 解决线条端点缺角问题

问题原因 #

SVG线条默认的stroke-linecap属性值为butt，线条会精确在设定的起止坐标位置截断，斜向线条的端点边缘会超出viewBox的可视范围，因此呈现出缺角的视觉效果。

解决方法 #

方法1：修改线条端点属性（最常用） #

直接给line标签添加stroke-linecap属性，可选值有两种：

• 取值round：给线条两端添加半圆形端点，线条整体更柔和平滑，适合需要圆润效果的场景
  代码示例：

  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="80" x2="100" y2="20" stroke="black" stroke-linecap="round" />
  </svg>
  

• 取值square：给两端添加方形端点，延伸长度等于线条宽度的一半，刚好填满边界空缺，保持线条端点方正
  代码示例：

  <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="80" x2="100" y2="20" stroke="black" stroke-linecap="square" />
  </svg>
  

如果是多段线存在转角缺角的情况，可以额外添加stroke-linejoin="round"属性，让转角位置也实现平滑过渡。

方法2：扩大viewBox可视范围 #

如果需要保留默认的平头端点样式，可以调整viewBox的参数，给可视范围预留边距，避免线条端点被截断：

<!-- 上下左右各预留1px的可视边距 -->
<svg viewBox="-1 -1 102 102" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
</svg>

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