SVG stroke-linecap 属性

SVG（可缩放矢量图形）是一种用于表示 Web 中图像的 XML 格式，其设计的一个重要目标是可扩展性。

stroke-linecap 属性是一个用于定义线条末端形状的 SVG 属性。

属性值

stroke-linecap 属性可以有以下三个值：

• butt（默认值）：线条末端截断（直角）。

• round：线条末端在一个半圆形内结束。

• square：线条末端在一个尖角矩形内结束。

语法

<path stroke-linecap="butt|round|square" />

用法示例

butt 示例

<svg height="150" width="200">
  <path d="M 50 50 L 150 50" stroke="black" stroke-width="20"
  stroke-linecap="butt"/>
</svg>

输出：

round 示例

<svg height="150" width="200">
  <path d="M 50 50 L 150 50" stroke="black" stroke-width="20"
  stroke-linecap="round"/>
</svg>

输出：

square 示例

<svg height="150" width="200">
  <path d="M 50 50 L 150 50" stroke="black" stroke-width="20"
  stroke-linecap="square"/>
</svg>

输出：

兼容性

stroke-linecap 属性在主流现代浏览器中均得到支持，但在 IE 中需要使用插件才能正常显示。

结语

stroke-linecap 属性定义了 SVG 线条的末端形状，可以用于创建丰富的可缩放矢量图形。在实际开发中，可以根据需要选择不同的属性值。