1. 什么是stroke？
stroke是HTML5的SVG（可缩放矢量图）中的一个属性，用于定义形状边框的颜色，宽度和样式。当绘制图形时，可以用stroke属性来指定要绘制边框的颜色、宽度和样式。同时，该属性还用于把两个相邻形状结合起来以创建自定义路径。
stroke属性与fill（填充）属性配合使用，可以定义图形的完整轮廓线和填充颜色。
2. stroke基本语法
SVG的stroke属性基本语法如下：
stroke="color width style"
其中，color是指定边框的颜色值，可以使用颜色名字、RGB值、十六进制值或预定义颜色名称；width是指定边框的宽度，可以是整数也可以是浮点数，默认值为1；style是指定边框的样式，可以是solid、dashed、dotted、double等，其中solid为实线，dashed为虚线，dotted为点线。
3. stroke应用场景
3.1 绘制基本图形
stroke属性可以用于定义绘制基本图形的边框颜色、宽度和样式。比如，下面的代码展示了如何使用stroke属性来绘制一个圆形：
<svg width="100" height="100">
<circle cx="50" cy="50" r="40"
stroke="blue" stroke-width="2" fill="white" />
</svg>
其中，cx和cy表示圆心的坐标值，r表示圆的半径，fill表示圆的填充颜色，stroke和stroke-width分别表示边框的颜色和宽度。
执行上述代码，可以得到一个蓝色圆形，如下图所示：
3.2 绘制自定义路径
stroke属性还可以用于绘制自定义路径，可以通过定义一系列的点来创建路径。下面的代码展示了如何使用stroke属性来创建一个正方形：
<svg width="100" height="100">
<path d="M10 10 h 80 v 80 h -80 z"
stroke="blue" stroke-width="2" fill="white" />
</svg>
执行上述代码，可以得到一个蓝色正方形，如下图所示：
其中，d属性表示绘制的路径，以M为起点，以H和V指令绘制水平和垂直线段，以Z指令结尾。H指令表示绘制水平线段，参数为终点的x坐标值；V指令表示绘制垂直线段，参数为终点的y坐标值。
4. 总结
stroke属性是HTML5中非常有用的一个属性，它不仅可以用于绘制基本图形（如圆、方、线），而且可以用于自定义路径的绘制，并可以通过width、color、style等属性改变边框的颜色、宽度和样式。它与fill属性配合使用，可以定义个性化的形状轮廓和填充颜色。因此，在进行图形绘制时，它是必不可少的一个属性。