SVG Stroke 属性详解

SVG Stroke 属性详解

SVG（可缩放矢量图形）是一种基于可扩展标记语言（XML）的图形文件格式，用于描述二维矢量图形。在SVG中，stroke属性是控制图形轮廓线的关键属性。本文将详细介绍SVG的stroke属性，包括其用法、参数以及在实际应用中的技巧。

1. stroke 属性概述

stroke属性用于设置图形轮廓线的颜色、宽度、样式等。它是一个属性值，可以与SVG的其他属性结合使用，以创建丰富的图形效果。

2. stroke 属性参数

2.1 stroke-color

stroke-color参数用于设置轮廓线的颜色。其值可以是预定义的颜色名称、颜色代码或颜色关键字。

• 预定义颜色名称：例如red、blue、green等。
• 颜色代码：例如#FF0000（红色）、#00FF00（绿色）、#0000FF（蓝色）等。
• 颜色关键字：例如currentColor，表示使用当前颜色。

2.2 stroke-width

stroke-width参数用于设置轮廓线的宽度。其值可以是数值、百分比或inherit关键字。

• 数值：例如2、5等，表示轮廓线的宽度为指定像素。
• 百分比：例如10%，表示轮廓线的宽度为图形宽度的百分比。
• inherit