SVG Stroke 属性

SVG Stroke 属性

SVG（Scalable Vector Graphics）是一种基于XML的图像格式，用于在网页上创建矢量图形。SVG图形的强大之处在于它们可以无限放大而不失真，这使得它们非常适合各种设计和图形应用。在SVG中，stroke属性用于定义图形的边框或线条的样式、颜色和宽度。本文将详细介绍SVG中的stroke属性，包括其基本用法和一些高级特性。

基本用法

stroke-width

stroke-width属性用于设置图形边框或线条的宽度。其值可以是任何长度单位，如像素（px）、点（pt）、厘米（cm）等。

<svg width="100" height="100">
  <rect x="10" y="10" width="30" height="20" stroke="black" stroke-width="2" fill="none"/>
</svg>

在上面的例子中，我们创建了一个矩形，并设置了其边框颜色为黑色（stroke="black"），边框宽度为2个单位（stroke-width="2"）。

stroke-color

stroke属性用于设置边框或线条的颜色。颜色值可以是预定义的颜色名称（如red、blue等），十六进制颜色代码（如#FF0000、#0000FF等），RGB颜色值（如rgb(255,0,0)、rgb(0,0,255)等），或RGBA颜色值（如rgba(255,0,0,0.5)等）。

<svg width="100" height="100">
  <circle cx="50" cy="50" r="20" stroke="blue" stroke-width="2" fill="none"/>
</svg>

在这个例子中，我们创建了一个圆形，并设置了其边框颜色为蓝色（stroke="blue"）。

stroke-opacity

stroke-opacity属性用于设置边框或线条的不透明度。其值范围从0（完全透明）到1（完全不透明）。

<svg width="100" height="100">
  <line x1="10" y1="10" x2="90" y2="90" stroke="green" stroke-width="2" stroke-opacity="0.5"/>
</svg>

在这个例子中，我们创建了一条线，并设置了其边框颜色为绿色（stroke="green"）和50%的不透明度（stroke-opacity="0.5"）。

高级特性

stroke-linecap

stroke-linecap属性用于定义线条端点的样式。其可能的值有butt、round和square。

• butt：端点是平直的，与线条的宽度无关。
• round：端点是圆形的，直径等于线条的宽度。
• square：端点是方形的，增加了一个宽度和线条相同、高度是线条宽度一半的矩形。

<svg width="100" height="100">
  <line x1="10" y1="50" x2="90" y2="50" stroke="black" stroke-width="10" stroke-linecap="butt"/>
  <line x1="10" y1="70" x2="90" y2="70" stroke="black" stroke-width="10" stroke-linecap="round"/>
  <line x1="10" y1="90" x2="90" y2="90" stroke="black" stroke-width="10" stroke-linecap="square"/>
</svg>

stroke-dasharray

stroke-dasharray属性用于创建虚线。其值是一组用逗号或空格分隔的数字，每个数字表示线段和间隙的长度。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" stroke="black" stroke-width="2" fill="none" stroke-dasharray="5,5"/>
</svg>

在这个例子中，我们创建了一个矩形，并设置了其边框为虚线（stroke-dasharray="5,5"）。

stroke-linejoin

stroke-linejoin属性用于定义线条连接处的样式。其可能的值有miter、round和bevel。

• miter：连接处是尖锐的。
• round：连接处是圆角的。
• bevel：连接处是斜角的。

<svg width="100" height="100">
  <polyline points="10,10 90,50 10,90" stroke="black" stroke-width="10" fill="none" stroke-linejoin="miter"/>
</svg>