CSS 填充与描边模块第 3 级

1. 介绍

定义 形状的文本和 SVG 图形元素——path 元素、诸如 rect 这样的基本形状——通过被 填充 （即绘制对象的内部）以及被 描边 （即沿对象轮廓绘制）来呈现。

本规范通过定义一系列控制元素填充和描边的外观与形状的属性， 描述文本和 SVG 图形元素如何被填充与描边。

插入来自 SVG2 的指定绘制。

处理文本装饰。 见议题和其他议题。

2. 绘制

绘制使抽象几何形状变得可见。 它由颜色、图案、图像、渐变以及其他 2D 图形组成。 <color> 类型表示 0 维绘制； 它在 [CSS3-COLOR] 中定义。 <paint> 类型表示 2 维绘制， 其语法为：

<paint> = none | <image> | <svg-paint>

none

表示不应用任何绘制。

<image>

定义于 [CSS3-IMAGES]，包括图像引用和渐变。

<svg-paint>

引用 SVG 绘制服务器， 并在§2.1 SVG 特定绘制中定义。

2.1. SVG 特定绘制

<svg-paint> = child | child( <integer> )

child

指代被绘制元素的最后一个子绘制服务器元素。

如果不存在这样的子元素， 则表现为 none。

child(<integer>)

此函数式 记法 接受一个正整数作为其实参， 指代被绘制元素的第 n 个子绘制服务器元素 （从 1 开始编号，如 ::nth-child()）。

如果不存在这样的子元素， 则表现为 none。

小于 1 的实参无效。

context-fill 和 context-stroke 需要整合到本 规范中， 但它们应作为每个单独的 stroke 和 fill 子属性上的关键字， 而不是作为 <paint> 值。 需要更多工作组讨论， 并确认这是一个将被保留的 SVG2 特性， 然后我们才能为此进行相当大规模的编辑。

CSS Images 4 §3.4.1 绘制源定义 如何 处理 SVG 绘制服务器坐标空间。 在这里复制、引用，还是采用其他方式？

3. 填充

填充在 SVG 形状的轮廓内或行内（或 SVG 文本）盒的字形内进行绘制。 类似于背景 [CSS3BG]，填充可以是纯色（fill-color） 和/或图像图案（fill-image 等）。

强烈建议在设置fill时使用 简写属性。 只有在需要改变某个单独方面时，才应使用单独的绘制长写属性。

添加一个 box-break 属性，作为 box-decoration-break、fill-break 和 stroke-break 的简写？

3.1. 分层多个填充

盒的填充可以有多个层。 层数由 fill-image 属性中以逗号分隔的值的数量决定。 none 值仍会创建一个层。

列表值属性的交互方式与背景图像完全相同， 定义于 CSS Backgrounds 3 §3.1 分层多个 背景图像。

3.2. 填充几何

3.2.1. SVG 形状的环绕规则：fill-rule 属性

fill-rule 属性指示用于确定画布的哪些部分包含在形状内部的规则。 对于简单的、非相交路径， 直观上很清楚哪个区域位于“内部”； 然而，对于更复杂的路径， 例如自身相交的路径 或一个子路径包围另一个子路径的情况， 对“内部”的解释就不那么明显。

fill-rule 属性提供两种选项，用于确定 形状 的内部：

nonzero

此规则通过从画布上的该点向任意方向无限远处绘制一条射线， 然后检查形状的某个线段与该射线相交的位置， 来确定该点的“内在性”。 从零开始计数， 每当路径线段从左到右穿过射线时加一， 每当路径线段从右到左穿过射线时减一。 计数完成后， 如果结果为零，则该点在路径外部。 否则，它在内部。

evenodd

此规则通过从画布上的该点向任意方向无限远处绘制一条射线， 并计算该射线穿过给定形状的路径线段数量， 来确定该点的“内在性”。 如果该数量为奇数， 则该点在内部； 如果为偶数， 则该点在外部。

注： 上述描述没有规定 路径线段与射线重合或相切时应如何处理。 由于任意射线都可以， 可以简单地选择一条不会出现此类问题相交的不同射线。

此属性不适用于文本 （无论是 SVG 还是 CSS）， 因为文本字形的“内部”是内在定义的。

这是否应当分层？

3.2.2. 片段化填充：fill-break 属性

此属性指定片段化盒的几何形状对于填充如何处理。

值具有以下含义：从 FRAGMENTATION 复制

3.3. 填充绘制

3.3.1. 填充颜色：fill-color 属性

此属性设置元素的填充颜色。 此颜色绘制在任何填充图像之后。

建议作者使用 color 属性 来设置文本颜色， 而不是使用 fill-color。

与 background-color 不同， 只有当 fill-image 的最终层为 none 或无效图像时， 才必须绘制填充颜色。 如果它是有效 图像， 则不得绘制填充颜色。

注： 这是为了匹配 SVG 传统 fill 属性的行为， 该属性在单层图像语法中内置了一个“后备颜色”。 在 CSS 中，这最好通过 image() 函数实现， 该函数使后备显式化。

fill-color 应该 像 stroke-color 一样分层， 以使两组属性尽可能一致。

SVG 用户代理必须在其用户代理 样式表中包含以下规则 （或其等效规则）：

@namespace svg "http://www.w3.org/2000/svg";
svg:svg:root, *|*:not(svg|*) > svg:svg {
  fill-color: black;
}

3.3.2. 填充图像源：fill-image 属性

此属性设置元素的填充图像。 图像按第一个指定的图像位于最上层（最接近用户）的方式绘制， 随后的每个图像绘制在前一个图像之后。 值的解释与 background-image 相同， 作必要修正。

3.3.3. 填充定位区域：fill-origin 属性

此属性指定填充的坐标系， 设置填充 定位区域。 值具有以下含义：

match-parent

使用与父元素相同的填充定位区域。 如果没有父元素，则使用初始包含块。

content-box

padding-box

border-box

使用盒自身的 content-box/padding-box/border-box 作为填充定位区域。 对于 SVG 形状，content-box 和 padding-box 被视为 fill-box， 而 border-box 被视为 stroke-box。

fill-box

对于 SVG 形状或 SVG 文本， 使用元素的对象 边界框。 对于 CSS 盒， 使用该元素及其所有在流中或浮动后代的文本字形轮廓的边界框。

stroke-box

对于 SVG 形状或 SVG 文本， 使用元素的描边 边界框。 对于 CSS 盒， 使用该元素及其所有在流中或浮动后代的文本字形描边轮廓的边界框。

SVG UA 样式表被修订为包含以下规则：

svg:svg {
  fill-origin: content-box;
}

填充绘制区域在尺寸上是无限的。 绘制时， 填充颜色/图像与受影响文本的字形区域， 或受影响 SVG 形状的填充几何相交。

SVG 绘制服务器通过 *Units 属性携带自己的发起者信息， 但也许 SVGWG 可以添加一个新值，使它们关注 CSS 发起者。 或者，我们可以在这里添加一个 auto 初始值， 当你引用某个绘制服务器时， 它会延用该绘制服务器的信息， 否则为 match-parent。

3.3.4. 定位填充图像：fill-position 属性

如果指定了填充图像， 此属性指定它们在相应填充定位区域内 的初始位置 （在任何尺寸调整之后）。 值的解释与 background-position 相同， 作必要修正。

3.3.5. 调整填充图像尺寸：fill-size 属性

指定填充图像的尺寸。 值的解释与 background-size 相同， 作必要修正。

3.3.6. 平铺填充图像：fill-repeat 属性

指定填充图像在调整尺寸和定位之后如何平铺。 值的解释与 background-repeat 相同， 作必要修正。

3.3.7. 填充简写：fill 属性

此属性是一个简写，在一个声明中设置所有 填充 绘制属性——fill-color、fill-image、fill-origin、fill-position、fill-size 和 fill-repeat——。 省略的值会被设置为其初始值， 但省略的 fill-color 会被设置为 transparent， 且省略的 fill-origin 会被设置为 fill-box。

通过此简写设置时， fill-origin 的默认值应是什么？ content-box 还是 fill-box？ 对于像 Zapfino 这样花哨/溢出的字体，fill-box 效果更好， 但它比 content-box 的计算成本高得多。

SVG 有特殊的颜色 后备语法——图像后面的颜色只有在图像失败时才会绘制。 这与我们希望匹配 background 的意愿冲突， 因为 fill: url(#foo) red; 并不是用红色填充然后绘制 #foo。 折中方案：fill-color 是后备颜色， 但 none 和无效图像都会触发后备。 因此 fill: url(#foo) red; 只有在没有 #foo 时才会绘制红色（类似 SVG）， 但 fill: url(#foo), red（等同于最后一层上的 none red） 会绘制红色并且绘制 #foo（类似 background）。

3.4. 填充透明度

3.4.1. 填充不透明度：fill-opacity 属性

fill-opacity 属性指定用于填充元素的绘制 操作 的不透明度。 与 opacity 一样， 值 0 或 0% 表示完全透明， 值 1 或 100% 表示完全不透明。

4. 描边（轮廓）

描边沿 SVG 形状的轮廓或行内（或 SVG 文本）盒的字形绘制边界。 所得区域可以类似于填充区域那样被填充。描边 可以是纯色（stroke-color）和/或图像图案（stroke-image 等）。

强烈建议在设置stroke时使用 简写属性。 只有在需要改变某个单独方面时，才应使用单独的绘制长写属性。

默认情况下，描边绘制在填充之上。 在 SVG 文本或 SVG 形状中， 绘制顺序由 paint-order 属性控制。

paint-order 是否也应适用于非 SVG 文本？

4.1. 分层多个描边

盒的描边可以有多个层。 层数由 stroke-image 属性的逗号分隔值数量 和 stroke-color 属性的逗号分隔值数量 中较大者决定。 none 值仍会创建一个层。

如果这两个属性的长度不同， 值从末尾对齐， stroke-color 缺失的前置值默认为 transparent， 而 stroke-image 缺失的前置值默认为 none。

列表值属性的交互方式与背景图像完全相同， 定义于 CSS Backgrounds 3 §3.1 分层 多个 背景图像。

stroke-color 必须以前置填充方式填充 transparent， 否则如果图像加载失败，多个图像层将随机回退到纯色。 我们是否希望描边和填充通常以前置填充方式填充初始值， 还是其余这些属性应像背景那样重复其列表？

4.2. 描边几何

根据 SVGWG 决议， 我们目前将描边绘制属性以及 stroke-width 分层。 是否应将其他几何属性也分层？ 它们有类似的用例， 尽管更小众一些， 而 API 的一致性很重要。 值得实现/测试投入吗？ 困难情况：stroke-dasharray， 因为它具有“到处都能有逗号，哈哈”的语法。

4.2.1. 描边粗细：stroke-width 属性

此属性指定轮廓上描边的宽度。 零值会使该层不绘制描边。 负值无效。

缩放视口 尺寸是视口宽度和高度的几何平均值。

4.2.2. 描边定位：stroke-align 属性

此属性允许作者沿轮廓对齐描边。

center

每个子路径的描边 以轮廓为中心。

inset

每个子路径的描边 位于轮廓的“内侧” （进入填充区域）。

必须忽略 stroke-linejoin 属性。

为什么要忽略 stroke-linejoin？ 它对于内部转角仍然是需要的。

outset

每个子路径的描边 位于轮廓的“外侧” （在填充区域之外）。

文本很容易，简单的闭合、非自相交 路径也很容易， 但其他类别也存在，并且需要良好的定义。

这如何应用于开放路径线段？ 一种建议是，对于开放路径，将 outset 别名化为 left，并将 inset 别名化为 right。 端帽如何处理？

这如何应用于带有环的路径？ 下图中红圈内的区域是否是被描边的一部分（如图所示）？ 如果填充规则是 nonzero，内部边是否会被描边；若会，如何描边？ （下面显示时未描边。）

虚线如何处理？它们是否基于原始路径？

4.2.3. 描边端部形状：stroke-linecap 属性

stroke-linecap 指定开放 子路径 （例如虚线描边的线段， 或未闭合的 path 元素） 被描边时在其端部使用的形状。 可能的值为：

butt

每个子路径的描边 不会延伸超过其两个端点。 （因此，零长度子路径不会有任何描边。）

round

在每个子路径的每一端， 描边会延伸出一个半圆， 其半径等于描边宽度的一半。 （零长度子路径的描边 是以该子路径的点为中心的完整圆。）

square

在每个子路径的端部， 描边会延伸出一个矩形， 其宽度与描边宽度相同，长度为描边宽度的一半。 （零长度子路径的描边 是一个边长等于描边宽度的正方形， 以该子路径的点为中心， 并定向为使其两条边平行于该子路径点处的有效切线。 关于如何确定零长度子路径处切线的细节，见§4.6 计算描边形状。）

在曲线轮廓上的虚线端部添加矩形 看起来很糟。 它应该只是按 stroke-width/2 沿轮廓延伸虚线。

关于线帽将具有的形状的更精确描述， 见下面端帽形状 的定义。

4.2.4. 描边转角形状：stroke-linejoin 属性

stroke-linejoin 指定路径或基本形状被描边时 在转角处使用的形状。 它有两个部分：[ crop | arcs | miter ] 指定是否以及如何 延伸 描边的转角；[ bevel | round | stupid ] 指定当转角的“端帽” 长度受 stroke-miterlimit 限制时如何渲染。

crop

描边延伸过转角的最小必要量， 以形成凸角。

这与 miter 的行为相同， 但会强制 stroke-miterlimit 表现得好像它具有其最小 值 1。

miter

使用尖角连接路径线段。 转角通过在路径线段切线处延伸描边的外边缘，直到它们相交来形成。

arcs

使用 arcs 转角连接路径线段。 arcs 形状通过在连接点处，用与连接点处外边缘曲率相同的圆弧 延伸描边的外边缘来形成。

bevel

转角在 stroke-miterlimit 处由 垂直于其对角线的线裁切。

round

转角像 bevel 那样裁切， 并附加一段与被截断描边边缘相切的填充圆弧， 以圆化转角。

fallback

当超过 stroke-miterlimit 时， 其行为如同指定了 crop bevel。

我们能否直接移除 fallback？ 它是个愚蠢的值， 仅仅因为我们在 SVG1 中没有按 miterlimit 裁剪的行为才有用。 问题在于，人们现在大多只是“意外地”得到了 bevel 行为， 并且会接受他们的连接延伸到 miterlimit 且只有多余的转角被裁剪， 还是他们确实想要当前指定的这种不连续行为。 断点位于 29 度和 30 度之间。

如果省略 [ crop | arcs | miter ]， 则默认为 crop。 如果省略 [ bevel | round | fallback ]， 则默认为 fallback。

4.2.5. 描边转角限制：stroke-miterlimit 属性

此属性指定当两个描边线段在转角处相遇时，miter 或 arcs 连接 的最大尺寸。 （连接的表观“尺寸”——内角和外角之间的距离——会随着角度减小而趋近无穷大。）

当 stroke-align 为 inset 时，此属性无效果。

值具有以下含义：

<number>

指定连接尺寸的限制， 表示为其转角对角线与 stroke-width 的比值。 小于 1 的值无效（并使声明无效）。

对于 miter 线段连接， 对角线的长度 根据两个线段之间的角度计算为 stroke-width / sin(θ/2)。 线段连接会垂直于 平分两个路径线段夹角的线被裁切。

对于 arcs 线段连接， 对角线的长度 沿一段圆弧计算，该圆弧在两线段相交点处 与平分两个线段夹角的线相切， 并经过连接的端点。 线段连接会垂直于该圆弧被裁切。

我们是否应添加角度？ miterlimit 数字具有物理上的合理性， 但如果不经过实验，很难理解。

4.2.6. 片段化描边：stroke-break 属性

此属性指定片段化盒的几何形状对于描边如何处理。

值具有以下含义：从 FRAGMENTATION 复制

4.3. 描边虚线

4.3.1. 描边虚线图案：stroke-dasharray 属性

此属性控制用于描边路径的虚线和间隙图案。

none

无虚线：描边连续绘制。

<length-percentage>+#

指定要使用的虚线图案。 每个 <length-percentage> 值 表示描边的下一个虚线段或间隙的长度 （从第一个虚线段开始并从那里交替）。 该图案在描边长度上重复。 （如果值的数量为奇数， 该图案的行为如同被复制以产生偶数个值。） 虚线图案会在每个子路径的起点重置并重新开始。

负值无效。 如果所有值均为零，则视为 none。

SVG 允许逗号 分隔。 为了向后兼容，我们是否需要在 CSS 中允许这一点？（请说不需要。）

需要一种方式来指定 相对于描边宽度的虚线 长度。 （例如，用于制作方形虚线。）

需要一种方式来指定 相对于路径长度的虚线 长度。 （例如，用于无需脚本实现“自绘制 SVG”效果。）

4.3.2. 描边虚线起始位置：stroke-dashoffset 属性

此属性指定在路径开头开始绘制虚线时，进入重复虚线图案的距离。 值可以为负。

关于虚线将沿路径放置的位置的更精确描述， 见§4.6.3 虚线位置。

4.3.3. 转角控制：stroke-dash-corner 和 stroke-dash-justify 属性

stroke-dash-corner 属性控制 是否总是在被描边形状的顶点处绘制虚线。 绘制转角虚线的点包括 该形状的等效路径中每个线段的起点和终点。

none

此属性对虚线没有特殊效果： 虚线沿路径连续定位/调整尺寸。

<length>

必须在形状的每个顶点处绘制给定 <length> 的虚线。 对于开放形状， 第一个转角虚线的定位方式是使其从路径起点开始， 最后一个转角虚线的定位方式是使其在路径终点结束。 开放形状的其他转角虚线， 以及闭合形状的所有转角虚线， 都定位为以其顶点为中心。

开放形状的 第一个和最后一个顶点处的转角虚线 是否应为其他转角虚线长度的一半？ 这是否应由作者控制？

是否应有一种方式来 指定内边距， 以便转角虚线之间的任何虚线图案 不会紧贴它们？

转角需要承担 虚线图案中第一个虚线段的角色， 因此每个线段的“内部”会以间隙开始和结束。 是否在每个线段中自动跳过图案中的第一个虚线段？

用于将 第一个虚线段的长度作为转角的关键字。

当 stroke-dash-corner 不是 none 时， 虚线图案 （由 stroke-dasharray 指定） 会在每个路径线段上分别重复， 位于该线段的转角虚线之间的空间内。

需要定义 当转角虚线会重叠时 会发生什么。

当此属性处于激活状态时， 是否应自动触发对齐？ 如果没有它，默认情况下会得到一些看起来很蠢的结果。

stroke-dash-justify 属性指定 描边的虚线图案是否以及如何被调整， 以便它在元素的每个子路径上 重复整数次。

none

不对虚线图案进行调整： 它会在子路径末尾被裁剪， 保留到该点为止已经推进的程度。

stretch

表示当虚线图案无法以整数次装入某个子路径时， 虚线段或间隙（或二者）会被加长，以便能够装入。

compress

表示当虚线图案无法以整数次装入某个子路径时， 虚线段或间隙（或二者）会被缩短，以便能够装入。

dashes

表示当虚线图案要被拉伸或压缩时， 虚线段的长度会被调整。

gaps

表示当虚线图案要被拉伸或压缩时， 间隙的长度会被调整。

如果既未指定 stretch 也未指定 compress， 则默认采用调整量较小的那个。

如果既未指定 dashes 也未指定 gaps， 则默认为 ???。

默认值可能应为 仅调整间隙。

虚线图案将被调整到的目标长度 取决于 stroke-dash-corner 属性的值：

• 如果 stroke-dash-corner 为 none， 则虚线图案会被调整， 以便在子路径长度内装入整数次。

• 如果 stroke-dash-corner 具有任何其他值， 包括零长度， 则虚线图案会针对子路径的每个路径线段以不同方式调整， 使其在该线段两端的两个转角虚线之间 装入整数次。

虚线图案中虚线段和间隙长度的调整通过按某个因子缩放长度来完成， 该因子是最接近 1 的数， 且会使虚线图案在目标长度中 装入整数次。 如果使用 stretch， 该因子是 1 到 2 之间的数字， 而如果使用 compress， 该因子是 0 到 1 之间的数字。

如果指定了 stretch， 但虚线图案长于目标长度， 则不执行调整。

当线段 太长时，是否应将其居中？

如果指定了 compress， 但虚线图案的可调整部分 无法被压缩到足以使虚线图案装入目标长度， 则可压缩部分必须被设置为零。

我们是否希望允许 控制 描边以虚线段结束还是以间隙结束？ 对于闭合路径， 你可能希望末尾是间隙， 而对于开放路径， 末尾是虚线段可能更好。 也许省略对此的控制， 只根据路径是否闭合自动处理？

4.4. 描边绘制

4.4.1. 描边颜色：stroke-color 属性

此属性设置元素的描边颜色。 与 stroke-image 一样， 描边颜色按第一个指定的颜色位于最上层 （最接近用户）的方式绘制， 随后的每个颜色绘制在前一个颜色之后。

只有当对应层上的 stroke-image 是 none 或无效图像时， 才绘制描边颜色。 （换言之， 每个层绘制图像或颜色二者之一， 如果二者都指定，则图像优先。）

注： 这是为了匹配 SVG 传统 stroke 属性的行为， 该属性在单层图像语法中内置了一个“后备颜色”。 在 CSS 中，这最好通过 image() 函数实现， 该函数使后备显式化。

4.4.2. 描边图像源：stroke-image 属性

此属性设置元素的描边图像。 图像按第一个指定的图像位于最上层 （最接近用户）的方式绘制， 随后的每个图像绘制在前一个图像之后。 值的解释与 background-image 相同，作必要修正。

4.4.3. 描边定位区域：stroke-origin 属性

此属性指定描边的坐标系， 设置描边 定位区域。 值具有以下含义：

match-parent

使用与父元素相同的描边定位区域。 如果没有父元素，则使用初始包含块。

content-box

padding-box

border-box

使用盒自身的 content-box/padding-box/border-box 作为描边定位区域。 对于 SVG 形状，content-box 和 padding-box 被视为 fill-box， 而 border-box 被视为 stroke-box。

fill-box

对于 SVG 形状或 SVG 文本， 使用元素的对象 边界框。 对于 CSS 盒， 使用该元素及其所有在流中或浮动后代的文本字形轮廓的边界框。

stroke-box

对于 SVG 形状或 SVG 文本， 使用元素的描边 边界框。 对于 CSS 盒， 使用该元素及其所有在流中或浮动后代的文本字形描边轮廓的边界框。

SVG UA 样式表被修订为包含以下规则：

svg:svg {
  stroke-origin: content-box;
}

描边绘制区域在尺寸上是无限的。 绘制时， 描边颜色/图像与受影响文本的字形描边， 或受影响 SVG 形状的描边几何相交。

SVG 绘制服务器通过 *Units 属性携带自己的发起者信息， 但也许 SVGWG 可以添加一个新值，使它们关注 CSS 发起者。 或者，我们可以在这里添加一个 auto 初始值， 当你引用某个绘制服务器时， 它会延用该绘制服务器的信息， 否则为 match-parent。

4.4.4. 定位描边图像：stroke-position 属性

如果指定了描边图像， 此属性指定它们在相应描边定位区域内 的初始位置 （在任何尺寸调整之后）。 值的解释与 background-position 相同， 作必要修正。

4.4.5. 调整描边图像尺寸：stroke-size 属性

指定描边图像的尺寸。 值的解释与 background-size 相同， 作必要修正。

4.4.6. 平铺描边图像：stroke-repeat 属性

指定描边填充图像在调整尺寸和定位之后如何平铺。 值的解释与 background-repeat 相同， 作必要修正。

4.4.7. 描边简写：stroke 属性

此属性是一个简写，在一个声明中设置所有 描边 绘制属性——stroke-color、stroke-image、stroke-origin、stroke-position、stroke-size 和 stroke-repeat——。 省略的值会被设置为其初始值， 但省略的 stroke-color 会被设置为 transparent， 且省略的 stroke-origin 会被设置为 stroke-box。

4.5. 描边透明度

4.5.1. 描边不透明度：stroke-opacity 属性

stroke-opacity 属性指定用于描边当前对象的绘制 操作 的不透明度。 与 opacity 一样， 值 0 或 0% 表示完全透明， 值 1 或 100% 表示完全不透明。

4.6. 计算描边的形状

4.6.1. 描边路径

在所有情况下， 所有受方向性影响的描边属性， 例如与虚线图案有关的属性， 都必须以这样的方式呈现：描边操作 从图形元素开始的同一点开始。 特别是，对于 path 元素， 路径的起点是初始 “moveto” 命令的第一个点。

对于诸如虚线图案等 其计算依赖于沿图形元素轮廓推进情况的描边属性， 距离计算必须使用 SVG 用户代理的标准沿路径距离 算法。

当使用复杂绘制服务器执行描边时， 例如渐变或 pattern， 描边操作必须与如下结果相同： 如果由当前图形元素的几何形状 及其关联的描边属性所定义的几何形状 被转换为等效的 path 元素， 然后使用给定绘制服务器进行填充。

仅由单个 “moveto” 组成的子路径不得被描边。 如果 stroke-linecap 属性的值为 butt， 则任何零长度子路径不得被描边； 但如果 stroke-linecap 属性的值为 round 或 square， 则应被描边， 分别产生以给定点为中心的圆或正方形。 零长度子路径的示例包括 'M 10,10 L 10,10'、'M 20,20 h 0'、 'M 30,30 z'， 以及 'M 40,40 c 0,0 0,0 0,0'。

这应当与下面的 描边形状计算要求重复。 在本节中，我们应以描述性方式而不是规范性方式表述这些要求。

4.6.2. 描边形状

4.6.3. 虚线位置

本节尚未 处理 stroke-dash-corner 和 stroke-dash-justify。

4.6.4. 端帽形状

给定 position 处沿子路径的起始和结束端帽 形状按如下方式确定：

1. 如果 stroke-linecap 为 butt，则返回 一个空形状。

2. 否则，如果 stroke-linecap 为 round，则：

   1. 如果这是起始端帽， 则返回一个半径为 stroke-width 的半圆， 其定位方式满足：

      • 其直边平行于 在沿子路径距离 position 处 垂直于该子路径的线。

      • 其直边的中点位于 沿子路径距离 position 处的点。

      • 从其圆弧中点到其直边中点的方向 与沿子路径距离 position 处的 子路径方向相同。

   2. 否则，这是结束端帽。 返回一个半径为 stroke-width 的半圆， 其定位方式满足：

      • 其直边平行于 在沿子路径距离 position 处 垂直于该子路径的线。

      • 其直边的中点位于 沿子路径距离 position 处的点。

      • 从其直边中点到其圆弧中点的方向 与沿子路径距离 position 处的 子路径方向相同。

3. 否则，stroke-linecap 为 square：

   1. 如果这是起始端帽， 则返回一个边长为 stroke-width 和 stroke-width / 2 的矩形， 其定位方式满足：

      • 其较长边 A 和 B 平行于 在沿子路径距离 position 处 垂直于该子路径的线。

      • A 的中点位于 start。

      • 从 B 的中点到 A 的中点的方向 与沿子路径距离 position 处的 子路径方向相同。

   2. 否则，这是结束端帽。 返回一个边长为 stroke-width 和 stroke-width / 2 的矩形， 其定位方式满足：

      • 其较长边 A 和 B 平行于 在沿子路径距离 position 处 垂直于该子路径的线。

      • A 的中点位于 end。

      • 从 A 的中点到 B 的中点的方向 与沿子路径距离 position 处的 子路径方向相同。

4.6.5. 线段连接形状

给定子路径某个线段的线段连接形状 按如下方式确定：

1. 令 P 为该线段末端的点。

2. 令 A 为平行于该线段末端切线的线。

3. 令 B 为平行于后续线段起始处切线的线。

4. 如果 A 和 B 是同一条线， 则返回一个空形状。

5. 令 |A_left| 和 |A_right| 分别为平行于 A、相对于子路径方向在 A 左侧和右侧距离 stroke-width / 2 的线。

6. 令 |B_left| 和 |B_right| 分别为平行于 B、相对于子路径方向在 B 左侧和右侧距离 stroke-width / 2 的线。

7. 令 |P₁|、|P₂| 和 |P₃| 为按如下方式确定的点：

   1. 如果 A 与 B 之间较小的角位于这些线的右侧， 并考虑子路径方向， 则 |P₁| 和 |P₂| 是 |A_left| 和 |B_left| 上最接近 P 的点， 且 |P₃| 是 |A_left| 与 |B_left| 的交点。

   2. 否则，|P₁| 和 |P₂| 是 |A_right| 和 |B_right| 上最接近 P 的点， 且 |P₃| 是 |A_right| 与 |B_right| 的交点。

8. 令 bevel 为由三个点 P、|P₁| 和 |P₂| 形成的三角形。

9. 如果 stroke-linejoin 为 round， 则返回 bevel 与半径为 stroke-width 的圆形扇区的并集， 该扇区以 P 为中心， 且以 |P₁| 和 |P₂| 作为圆弧的两个端点。

10. 如果 stroke-linejoin 为 arcs， 则找出与 |P₁| 和 |P₂| 处的描边边缘相切， 并具有与这些点处边缘相同曲率的圆（见下文）。 如果两个曲率均为零，则落入 miter-clip。

    使用这些圆 （或者在零曲率情况下使用线）延伸描边边缘：

    • 如果两个圆（或圆和线）不相交， 则落入 miter-clip。

    • 如果两个圆（或圆和线）相交， 线段连接区域由将 P 与 |P₁| 和 |P₂| 连接起来的线， 以及由这些圆（或圆弧和线）定义的弧组成， 这些弧位于最接近 P 的交点与 |P₁| 和 |P₂| 之间。

      接下来，按 §4.2.5 描边转角限制：stroke-miterlimit 属性中定义的方式计算 miter limit。 裁剪线段连接区域中延伸超过 miter limit 的任何部分。 返回所得区域。

      注： 注意，曲率是在应用任何变换之前 在用户空间中计算的。

11. 如果 stroke-linejoin 为 miter 或 miter-clip， 则线段连接区域为 bevel 与 由三个点 |P₁|、|P₂| 和 |P₃| 形成的三角形的并集。

12. 令 θ 为 A 与 B 之间的角。 如果 1 / sin(θ / 2) ≤ stroke-miterlimit， 则返回该线段连接区域。

13. 如果 stroke-linejoin 为 miter-clip， 则裁剪线段连接区域中延伸超过 miter limit 的任何部分， 并返回该区域。

14. 返回 bevel。

4.6.6. 圆弧线段连接