SVG Stroke 属性

SVG 中的 stroke 属性用于定义图形元素的描边（边框）颜色，它可以应用于任何具有轮廓的图形元素，如 <rect>、<circle>、<path> 等。

基本语法

<element stroke="color" />

属性解析：

• stroke 属性定义了图形元素的描边颜色，可以使用颜色名称、十六进制颜色值、RGB值、RGBA值等来表示颜色。

• 如果不想显示描边，可以将 stroke 属性设置为 "none"。

SVG 提供了一个范围广泛 stroke 属性。

• stroke
• stroke-width
• stroke-linecap
• stroke-dasharray

所有 stroke 属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。

下面代码绘制了一个红色填充的矩形，并且指定了蓝色的描边。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 绘制一个红色矩形，带有蓝色描边 -->
  <rect x="50" y="50" width="100" height="80" fill="red" stroke="blue" />
</svg>

SVG stroke 属性

Stroke 属性定义一条线，文本或元素轮廓颜色：

下面是 SVG 代码：

点击查看：查看 SVG 文件。

SVG stroke-width 属性

stroke-width 属性定义了一条线，文本或元素轮廓厚度：

下面是SVG代码：

点击查看：查看 SVG 文件。

SVG stroke-linecap 属性

strokelinecap 属性定义不同类型的开放路径的终结：

下面是 SVG 代码：

点击查看：查看 SVG 文件。

---

SVG stroke-dasharray 属性

strokedasharray 属性用于创建虚线：

下面是 SVG 代码：

点击查看：查看 SVG 文件。

注意事项

• 如果要同时设置描边颜色和宽度，可以使用 stroke-width 属性来定义描边的宽度。

• 可以通过 stroke-opacity 属性来定义描边的透明度。

• 描边的颜色和宽度可以通过 CSS 样式表进行设置，也可以直接在元素上使用 style 属性进行定义。

通过设置 stroke 属性，你可以为SVG图形元素添加描边，使图形更具视觉效果和辨识度。