SVG形状的笔触定义了形状的轮廓。笔触是我们可以为任何SVG形状设置的基本SVG CSS属性之一。

样式属性

" stroke"和" fill" CSS属性是在SVG形状的" style"属性内指定的。这是一个例子：

<circle cx="50" cy="50" r="50"
        style="stroke: #000066; fill: 3333ff;" />

本示例定义了一个具有较深的蓝色笔触颜色和较浅的蓝色填充色的圆。

Stroke示例

SVG形状的笔触是该形状的轮廓。这是一个SVG笔画示例：

<circle cx="50" cy="50" r="25"
      style="stroke: #000000; fill:none;" />

本示例定义了一个黑色("#000000")笔触颜色且没有填充的圆。这是结果图像：

描边和填充示例

我们可以将SVG笔触和填充颜色组合为SVG形状。这是一个SVG笔触和填充示例：

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: #3333ff;" />

本示例定义了一个圆形，其笔触颜色为深蓝色(#000066)，填充颜色为浅蓝色(#3333ff)。这是结果图像：

stroke-width

SVG具有" stroke-width" CSS属性，该属性定义了笔触的宽度。这是SVG的"笔画宽度"示例：

stroke-width: 3px;

本示例将笔划宽度设置为3个像素。我们可以使用不同于像素的单位。在SVG坐标系单位中查看所有可用单位。

这是四个具有不同"笔画宽度"的示例：

<circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 1px;" />

<circle cx="150" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 3px;" />

<circle cx="250" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 6px;" />

<circle cx="350" cy="50" r="25"
        style="stroke: #000066; fill: none;
               stroke-width: 12px;" />

stroke-linecap

SVG" stroke-linecap" CSS属性定义了SVG线的末端如何呈现。 stroke-linecapCSS属性有三个可能的值。这些是：

butt
square
round

值butt会导致线端被截断，而该线端恰好在该行结束的地方截断。值square产生的线帽看起来像butt(切断)，但延伸到该线结束的地方。值round导致线形上限。

这是三个SVG" stroke-linecap"示例，它们说明了这三个" stroke-linecap"值(顺序="对接"，"正方形"，"圆形")：

本示例定义了三个绿线，其" stroke-width"为10，以更好地说明" stroke-linecap" CSS属性的效果。在每条绿线内画一条黑线，其" stroke-width"为1. 该线与绿线具有相同的" x1，y1"和" x2，y2"坐标，但未设置" stroke-linecap" 。这样，我们可以看到不同的" stroke-linecap"值之间的差异。

stroke-linejoin

" stroke-linejoin" CSS属性定义了形状中两条线之间的连接如何呈现。 " stroke-linejoin" CSS属性可以采用以下三个值之一。这些值是：

miter
round
bevel

这是三个SVG" stroke-linejoin"示例，它们说明了这些不同的值：

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;" />
<text x="22" y="20">miter</text>

<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: round;" />
<text x="122" y="20">round</text>

<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: bevel;" />
<text x="222" y="20">bevel</text>

" stroke-miterlimit" CSS属性与" stroke-linejoin" CSS属性一起使用。如果将" stroke-linejoin"设置为斜接，则可以使用" stroke-miterlimit"来限制两条线相交的点之间线接合(拐角)的延伸距离。

stroke-miterlimit

这是SVG的" stroke-miterlimit"示例：

注意，三个路径如何使用三个不同的" stroke-miterlimit"值，否则看起来几乎相同。这是结果图像：

<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 1.0;
             " />
<text x="29" y="20">1.0</text>
<path d="M120,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 2.0;
             " />
<text x="129" y="20">2.0</text>
<path d="M220,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;
             stroke-miterlimit: 4.0;
             " />
<text x="229" y="20">4.0</text>

1.0 2.0 4.0线连接的长度称为斜接长度。斜接长度是从直线连接的内角到直线连接的尖端测量的。在此图像中，斜接长度在连接线的顶部以红色绘制，并在连接线的右侧再次重复：

可以想象，行程越宽，连接线之间的角度越大，斜接的时间就越长。

" stroke-miterlimit"实际上设置了斜接长度和笔划宽度之间的比率的限制。因此，" stroke-miterlimit"为1.0表示斜接长度最大为1 x行程宽度。斜接超出了该范围。 1.0是" stroke-miterlimit"的最小可能值。

以下是一些使用" 1.0"作为" stroke-miterlimit"值的示例，但连接线的角度不同：

请注意，当角度较大时，斜接被切除的部分将如何较大。那是因为尖锐的角度自然会产生更长的斜接。

SVG的" stroke-dasharray" CSS属性用于绘制以虚线呈现的SVG形状的笔触。之所以称为"破折号数组"，是因为我们提供了一个数字数组作为值。这些值定义破折号和空格的长度。因此，我们应该提供偶数个数字。

笔划破折号+笔划破折号

这是一个SVGstroke-dasharray示例：

本示例定义了一个带有虚线的笔划，虚线部分的宽度为10像素，虚线之间的间隔为5像素。这是结果图像：

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5"  />

以下是一些带有不同破折号和空格宽度的示例：

第一行以10的虚线宽度开始，然后是5像素的间距，然后是5像素的虚线，然后是5像素的另一间距。然后重复该模式。

<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 5"  />

<line x1="20" y1="40" x2="120" y2="40"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5 5 10"  />

第二行以10的虚线宽度开始，然后是5像素的间距，然后是5像素的虚线，最后是10像素的间距。

" stroke-dashoffset"用于设置虚线模式开始的距离。这样，我们可以从进入图案的一半，然后从那里重复图案。这是SVG的" stroke-dashoffset"示例：

此示例将dash-offset设置为5像素，这意味着虚线的渲染将以5像素开始进入虚线模式(并非所有浏览器都完全支持此函数)。这是结果图像：

<line x1="20" y1="20" x2="170" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;
      stroke-dasharray: 10 5;
      stroke-dashoffset: 5;
      "  />

SVG的"笔画不透明度" CSS属性用于定义SVG形状的轮廓的不透明度。 "笔画不透明度"采用介于0和1之间的十进制数字。值越接近0，则笔画越透明。该值越接近1，则笔划越不透明。默认的"笔画不透明度"为1，表示笔画完全不透明。

stroke-opacity

这是一个SVG" stroke-opacity"示例，该示例显示了三行文本顶部带有不同" stroke-opacity"的行：

这是生成的图像。请注意，通过不同的行显示的文本越来越少了。

<text x="22" y="40">Text Behind Shape</text>

<path d="M20,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.3;
             " />

<path d="M80,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 0.7;
             " />

<path d="M140,40 l50,0"
      style="stroke: #00ff00;    fill:none;
             stroke-width:16px;
             stroke-opacity: 1;
             " />