在SVG中，stroke 属性用于定义图形的描边（边框）样式。stroke 属性可以应用于各种SVG元素，如线条、矩形、圆形、椭圆、路径等。以下是一些常见的 stroke 属性及其用法：

1. 颜色（Color）：
   <rect x="10" y="10" width="100" height="50" stroke="red" />
   在这个例子中，stroke 属性定义了矩形的描边颜色为红色。

2. 宽度（Width）：
   <line x1="10" y1="10" x2="90" y2="90" stroke="blue" stroke-width="2" />
   在这个例子中，stroke-width 属性定义了直线的描边宽度为2个用户单位。

3. 线型（Line Type）：
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="3" stroke-dasharray="5 2" />
   在这个例子中，stroke-dasharray 属性定义了圆形的描边为虚线，5个用户单位的实线和2个用户单位的空白交替。

4. 线帽和连接（Line Cap and Join）：
   <path d="M10 80 Q 95 10 180 80" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
   在这个例子中，stroke-linecap 属性定义了路径的线帽为圆形，stroke-linejoin 属性定义了路径的连接为圆形。

5. 渐变描边（Gradient Stroke）：
   <rect x="10" y="10" width="100" height="50" stroke="url(#gradient)" />
   在这个例子中，stroke 属性引用了一个渐变（通过 <linearGradient> 或 <radialGradient> 定义），实现渐变描边效果。

这些是一些常见的 stroke 属性用法，你可以根据需要组合使用这些属性，以实现不同的描边效果。SVG的 stroke 属性提供了丰富的选项，使得可以对图形的边框进行详细的控制。


转载请注明出处：http://www.pingtaimeng.com/article/detail/14676/SVG