现在位置: 首页 > SVG 教程 > 正文

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 xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none"> <path stroke="red" d="M5 20 l215 0" /> <path stroke="blue" d="M5 40 l215 0" /> <path stroke="black" d="M5 60 l215 0" /> </g> </svg>

尝试一下 »

点击查看:查看 SVG 文件

SVG stroke-width 属性

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

下面是SVG代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black"> <path stroke-width="2" d="M5 20 l215 0" /> <path stroke-width="4" d="M5 40 l215 0" /> <path stroke-width="6" d="M5 60 l215 0" /> </g> </svg>

尝试一下 »

点击查看:查看 SVG 文件

SVG stroke-linecap 属性

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

下面是 SVG 代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="6"> <path stroke-linecap="butt" d="M5 20 l215 0" /> <path stroke-linecap="round" d="M5 40 l215 0" /> <path stroke-linecap="square" d="M5 60 l215 0" /> </g> </svg>

尝试一下 »

点击查看:查看 SVG 文件


SVG stroke-dasharray 属性

strokedasharray 属性用于创建虚线:

下面是 SVG 代码:

实例

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <g fill="none" stroke="black" stroke-width="4"> <path stroke-dasharray="5,5" d="M5 20 l215 0" /> <path stroke-dasharray="10,10" d="M5 40 l215 0" /> <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" /> </g> </svg>

尝试一下 »

点击查看:查看 SVG 文件

注意事项

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

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

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

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