stroke-linecap

Baseline 已广泛支持

此功能已经成熟，并可在许多设备和浏览器版本上使用。自 ⁨2020 年 3 月⁩起，它已在各浏览器中推出。

stroke-linecap 属性是用于定义描边（stroke）在描边开放子路径（open subpaths）末端形状的表示属性。

注意： 作为一个表示属性，stroke-linecap 也有一个对应的 CSS 属性：stroke-linecap。当两者都被指定时，CSS 属性具有更高的优先级。

你可以将此属性与以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the (default) "butt" value -->
  <line x1="1" y1="1" x2="5" y2="1" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "round" value -->
  <line x1="1" y1="3" x2="5" y2="3" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "square" value -->
  <line x1="1" y1="5" x2="5" y2="5" stroke="black" stroke-linecap="square" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" />
</svg>

用法说明

值	`butt` \| `round` \| `square`
默认值	`butt（平头）`
可动画的	离散

butt（平头）

butt 值表示描边在每个子路径的两个端点处不会延伸。对于零长度的子路径，该路径将完全不被渲染。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "butt" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="butt" />

  <!-- Effect of the "butt" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="butt" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

round

round 值表示在每个子路径的末端，描边将向外延伸一个半圆形，其直径等于描边宽度。对于零长度的子路径，描边由一个以子路径点为中心的完整圆形组成。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "round" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="round" />

  <!-- Effect of the "round" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="round" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

square

square 值表示在每个子路径的末端，描边将向外延伸一个矩形，该矩形的宽度等于描边宽度的一半，高度等于描边宽度。对于零长度的子路径，描边由一个以子路径点为中心的、宽度等于描边宽度的正方形组成。

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of the "square" value -->
  <path d="M1,1 h4" stroke="black" stroke-linecap="square" />

  <!-- Effect of the "square" value on a zero length path -->
  <path d="M3,3 h0" stroke="black" stroke-linecap="square" />

  <!--
  the following pink lines highlight the
  position of the path for each stroke
  -->
  <path d="M1,1 h4" stroke="pink" stroke-width="0.025" />
  <circle cx="1" cy="1" r="0.05" fill="pink" />
  <circle cx="5" cy="1" r="0.05" fill="pink" />
  <circle cx="3" cy="3" r="0.05" fill="pink" />
</svg>

规范

规范
Scalable Vector Graphics (SVG) 2 # 线帽

浏览器兼容性

另见

CSS stroke-linecap 属性

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年4月16日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题