编辑这个页面须要登录或更高权限！

SVG stroke属性

stroke属性定义了给定图形元素的外轮廓的颜色。它的默认值是none。

 常用的属性有：

  1. stroke-width

  2. stroke-linecap

  3. stroke-linejoin

  4. stroke-miterlimit

  5. stroke-dasharray + stroke-dashoffset

  6. stroke-opacity

样式属性

CSS样式style的stroke和fill指定SVG形状的内部属性。这是一个示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<circle cx="50" cy="50" r="50" style="stroke: #000066; fill: 3333ff;" />
</svg>
测试看看‹/›

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

Stroke示例

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="25"
      style="stroke: #000000; fill:none;" /></svg>
测试看看‹/›

本示例定义了一个黑色（#000000）笔触颜色且没有填充的圆。运行后图像效果：

描边和填充(Stroke & Fill)示例

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="25"
        style="stroke: #000066; fill: #3333ff;" /></svg>
测试看看‹/›

本示例定义了一个具有较深的蓝色（#000066）笔触颜色和较浅的蓝色（#3333ff）填充色的圆。运行后图像效果：

stroke-width

SVG具有stroke-width定义笔触宽度的CSS属性。这是一个SVG stroke-width示例：

stroke-width: 3px;

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

这是四个不同的示例stroke-width：

<svg width="500" height="120">
<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;" />
</svg>
测试看看‹/›

运行后图像效果：

描边线帽(stroke-linecap)

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

butt
square
round

该值将butt产生一个线盖，该线盖将在该线的末端精确切断。该值将square导致线帽看起来像butt（截断），但会稍微超出该行的终点。该值将round导致线上限。

这里有三个SVG stroke-linecap其示出了这三个示例 stroke-linecap的值（序列= butt，square，round）：

本示例定义了三个绿线，其中a stroke-width为10，以更好地说明stroke-linecapCSS属性的效果。内的每个绿线绘制黑线用stroke-width 的1这条线具有相同x1, y1和x2, y2坐标为绿线，但没有 stroke-linecap一套。这样，您可以看到不同stroke-linecap 值之间的差异。

笔画线连接(stroke-linejoin)

该CSS属性stroke-linejoin定义如何在一个形状两条线之间的连接被渲染。该CSS属性stroke-linejoin可以采用三个值中的一个。这些值是：

miter
round
bevel

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

<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;stroke-width:16px;stroke-linejoin: miter;" ></path>
<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;" ></path>
<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;" ></path>
<text x="222" y="20">bevel</text>
</svg>
测试看看‹/›

miterroundbevel

stroke-miterlimit

style样式中stroke-miterlimit属性与stroke-linejoin一起使用。如果stroke-linejoin设置为斜接，则stroke-miterlimit可以使用来限制两条线相交的点（线角（角）延伸）之间的距离。

这是一个SVG stroke-miterlimit示例：

<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50"
      style="stroke: #000000;    fill:none;
             stroke-width:16px;
             stroke-linejoin: miter;             stroke-miterlimit: 1.0;
             " ></path>
<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;
             " ></path>
<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;
             " ></path>
<text x="229" y="20">4.0</text>
</svg>
测试看看‹/›

请注意stroke-miterlimit，三个路径如何使用三个不同的值，否则它们看起来几乎相同。运行后图像效果：

1.02.04.0

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

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

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

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

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

stroke-dasharray + stroke-dashoffset

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

这是一个SVG stroke-dasharray示例：

<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20"
      style="stroke: #000000; fill:none;
      stroke-width: 6px;      stroke-dasharray: 10 5"  />
</svg>
测试看看‹/›

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

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

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

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

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

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

运行后图像效果：

stroke-dashoffset用于设置多远虚线模式启动模式。这样，您可以从中途开始划线，例如从图案中途开始，然后从那里重复图案。这是一个SVG stroke-dashoffset示例：

<svg width="500" height="120">
<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>
测试看看‹/›

此示例设置dash-offset为5像素，这意味着虚线的渲染将以5像素开始进入虚线模式（并非所有浏览器都完全支持此功能）。运行后图像效果：

stroke-opacity

SVG CSS属性stroke-opacity用于定义SVG形状轮廓的不透明度。stroke-opacity取0和1之间的十进制数越接近0的值，越透明行程。该值越接近1，则笔划越不透明。默认stroke-opacity值为1，表示笔划完全不透明。

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

<svg width="500" height="120">
    <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>

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

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

这是生成的图像。请注意，靠后文本越来越不可见。

Text Behind Shape
SVG fill 属性SVG CSS样式