CSS | stroke-linecap 属性

在 SVG 中，使用 stroke-linecap 属性可以设置路径的两端的样式。该属性可以用于 <line>，<polyline> 和 <path> 元素中。

可选值

• butt: 默认值，表示路径会直接结束，不会覆盖任何额外的空间。
• round: 表示路径会以半径为线宽的一半的圆弧结束。
• square: 表示路径会以方形结束，该方形的宽度为线宽的一半，高度为线宽。

示例代码

line {
  stroke: #000;
  stroke-width: 10;
  stroke-linecap: butt;
}

polyline {
  stroke: #f00;
  stroke-width: 5;
  stroke-linecap: round;
}

path {
  stroke: #00f;
  stroke-width: 8;
  stroke-linecap: square;
}

注意事项

• stroke-linecap 属性只有在定义了 stroke-width 属性后才会生效。
• stroke-linecap 属性仅适用于路径的实际起点和终点，而不适用于路径中间的转折点。如果要在路径中间的转折点使用不同的样式，可以使用 stroke-linejoin 属性。