CSS stroke-linecap 属性值说明
| 值 | 描述 |
|---|---|
| butt | 以尖锐的角度结束行程。在0长度子路径上，不会呈现路径。这是此属性的默认值。 |
| square | 延伸到路径长度之外的冲程。 |
| round | 使得开始和终点。 |
| initial | 使属性使用其默认值。 |
| inherit | 从父母元素继承属性。 |
stroke-linecap 属性设置元素边框的起点和终点。
展示属性将被覆盖：例如 <path stroke-linecap="round" ... ></path>。
内联样式不会被覆盖：例如 <path style="stroke-linecap: round;" ...></路径>。
stroke-linecap 属性可以用作 CSS 属性作为表示属性。
它可以应用于任何元素，但只能对以下元素产生影响：<altGlyph>、<path>、<polyline>、<line>、<text>、<textPath>、<tref> 和 <tspan> .
| 初始值 | butt |
|---|---|
| 应用于 | 形状和文本内容元素。 |
| 继承 | 可继承 |
| 可动画的 | 无效 |
| 版本 | SVG 1.1规格 |
| DOM 语法 | object.strokelinecap =“round”; |
语法
stroke-linecap: butt | square | round | initial | inherit;
stroke-linecap 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Stroke-linecap 属性示例</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "butt" value -->
<path d="M1,1 h4" stroke="#8ebf42"
stroke-linecap="butt" />
<!-- Effect of the "butt" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42"
stroke-linecap="butt" />
<!-
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>
具有 "round" 值的 stroke-linecap 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Stroke-linecap 属性示例</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "round" value -->
<path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="round" />
<!-- Effect of the "round" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="round" />
<!-
the following pink lines highlight the
position of the path for each stroke
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>
具有 "square" 值的 stroke-linecap 属性示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
<h2>Stroke-linecap 属性示例</h2>
<svg viewBox="0 0 6 4">
<!-- Effect of the "square" value -->
<path d="M1,1 h4" stroke="#8ebf42" stroke-linecap="square" />
<!-- Effect of the "square" value on a zero length path -->
<path d="M3,3 h0" stroke="#8ebf42" stroke-linecap="square" />
<!-
以下粉红色线条突出显示每个笔划的路径位置
-->
<path d="M1,1 h4" stroke="#1c87c9" stroke-width="0.05" />
<circle cx="1" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="5" cy="1" r="0.05" fill="#1c87c9" />
<circle cx="3" cy="3" r="0.05" fill="#1c87c9" />
</svg>
</body>
</html>
日期：2020-06-02 22:14:46 来源：oir作者：oir