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;
值
正式定义
正式语法
stroke-linecap =
butt |
round |
square
示例
线帽
此示例演示了该属性的三个关键字值。
HTML
我们首先设置一个浅灰色矩形。然后，在一个组中，定义了三条路径，它们的长度与矩形的宽度完全相同，并且都从矩形的左边缘开始。它们都被设置为具有七像素宽的 dodgerblue 描边。
html
<svg viewBox="0 0 100 50" width="500" height="250">
<rect x="10" y="5" width="80" height="30" fill="#dddddd" />
<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 填充与描边模块 Level 3 # stroke-linecap |
浏览器兼容性
加载中…