SVG Stroke 属性

SVG Stroke 属性

SVG Stroke 属性用于定义 SVG 图形或图像中的描边颜色、宽度和样式。

描边颜色

描边颜色可以通过 stroke 属性定义，如下所示：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" stroke="#f00" />
</svg>

这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色。

描边宽度

描边宽度可以通过 stroke-width 属性定义，如下所示：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" stroke="#f00" stroke-width="5" />
</svg>

这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色，描边宽度为 5。

描边样式

描边样式可以通过 stroke-dasharray 属性定义。这个属性是用于绘制虚线或点线的。

例如，以下代码绘制一个点线：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" stroke="#f00" stroke-dasharray="3, 3" />
</svg>

这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色，描边样式为点线。

同样，以下代码绘制一个虚线：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" stroke="#f00" stroke-dasharray="10, 10" />
</svg>

这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色，描边样式为虚线。

还有一种常见的描边样式是实线，它是默认的描边样式。

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="100" stroke="#f00" />
</svg>

这将在一个 200x200 的 SVG 中绘制一个 100x100 的矩形。描边颜色为红色，描边样式为实线。

线段末端形状

stroke-linecap 属性用于控制（非封闭）线条的末端形状，取值包括：

  • butt：默认值，线条末端直接截止；
  • round：线条末端变为圆形；
  • square：线条末端变为正方形。

以下是一个例子：

<svg width="200" height="200">
  <line x1="100" y1="50" x2="100" y2="150" stroke="#f00" stroke-width="10" stroke-linecap="round" />
</svg>

这将在一个 200x200 的 SVG 中绘制一个从 (100, 50) 到 (100, 150) 的垂直线条。描边颜色为红色，描边宽度为 10，而线条末端则变成了圆形。

线段拐角形状

stroke-linejoin 属性用于控制线条拐角处的形状。取值包括：

  • miter：默认值，两个线条的拐角处形成一个锐角；
  • round：拐角处被形成一个圆弧；
  • bevel：拐角处被形成一个斜线。

以下是一个例子：

<svg width="200" height="200">
  <path d="M50 50 L150 50 L150 150 L75 100 L50 100 Z" stroke="#f00" stroke-width="10" fill="none" stroke-linejoin="bevel" />
</svg>

这将在一个 200x200 的 SVG 中绘制一个平行四边形。描边颜色为红色，描边宽度为 10，线条拐角处则变成了斜行。

小结

以上就是 SVG Stroke 属性的一些使用方法和常见值。使用这些属性，我们可以轻松地控制 SVG 图形的描边颜色、宽度、样式、线段末端形状和线段拐角形状。

SVG rect SVG text