stroke-linecap

stroke-linecap CSS 属性定义了在 SVG 元素的未闭合笔划的开放子路径末端使用的形状。如果存在，它将覆盖元素的 stroke-linecap 属性。

此属性适用于任何可以具有未闭合笔划的 SVG 形状和文本内容元素（有关完整列表，请参阅 stroke-linecap），但作为继承属性，它可以应用于诸如 <g> 之类的元素，并仍然对后代元素的笔划产生预期效果。

语法

css
/* keyword values */
stroke-linecap: butt;
stroke-linecap: round;
stroke-linecap: square;

/* Global values */
stroke-linecap: inherit;
stroke-linecap: initial;
stroke-linecap: revert;
stroke-linecap: revert-layer;
stroke-linecap: unset;

值

butt

指示每个子路径的笔划不超出其两个端点。在零长度子路径上，路径将不会呈现。这是默认值。

round

指示在每个子路径的末端，笔划将通过直径等于笔划宽度的半圆来扩展。在零长度子路径上，笔划由以子路径点为中心的完整圆组成。

square

指示在每个子路径的末端，笔划将通过宽度等于笔划宽度一半且高度等于笔划宽度的矩形来扩展。在零长度子路径上，笔划由一个正方形组成，其宽度等于笔划宽度，并以子路径点为中心。

正式定义

在数据库中找不到值！

正式语法

stroke-linecap = 
  butt    |
  round   |
  square

示例

线帽

此示例演示了属性的三个关键字值。

HTML

我们首先设置一个浅灰色矩形。然后，在一个组中，定义了三个路径，它们的长度与矩形的宽度完全相同，并且都从矩形的左边缘开始。它们都设置为具有 dodgerblue 笔划，宽度为 7。

html
<svg viewBox="0 0 100 50" width="500" height="250">
  <rect x="10" y="5" width="80" height="30" fill="#DDD" />
  <g stroke="dodgerblue" stroke-width="7">
    <path d="M 10,10 h 80" />
    <path d="M 10,20 h 80" />
    <path d="M 10,30 h 80" />
  </g>
</svg>

CSS

然后，我们通过 CSS 对每个路径应用不同的线帽样式。

css
path:nth-of-type(1) {
  stroke-linecap: butt;
}
path:nth-of-type(2) {
  stroke-linecap: square;
}
path:nth-of-type(3) {
  stroke-linecap: round;
}

结果

第一条路径具有 butt 线帽，这实质上意味着笔划完全延伸到路径的端点（起点和终点），不会更远。第二条路径具有 square 线帽，因此可见路径延伸到路径端点之外，使路径的总长度看起来是 87，因为路径长度为 80，两个正方形帽的宽度均为 3.5。第三条路径具有 circle 线帽，因此虽然它看起来也长 87 个单位，但两个线帽是半圆形而不是正方形。

规范

规范
CSS 填充和笔划模块第 3 级
# stroke-linecap

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见