SVG 描边

SVG 描边属性

理解 SVG 描边属性

在 SVG 中，‘stroke’（描边）指的是形状、线条或文本的轮廓。SVG 提供了多种属性来控制描边的外观。本章节将介绍一些最常用的属性：

• stroke：定义描边的颜色。
• stroke-width：定义描边的粗细。
• stroke-linecap：定义开放路径（线条）末端的形状。
• stroke-dasharray：创建虚线或点线。

这些属性可以应用于任何具有轮廓的图形元素，例如线条、路径、圆形、矩形、多边形，甚至文本。

stroke 属性

stroke 属性定义元素的轮廓颜色。你可以使用命名颜色、十六进制代码、RGB、HSL，甚至渐变或图案。

抱歉，你的浏览器不支持内联 SVG。

以下是展示不同描边颜色的 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Stroke Color</title>
</head>
<body>
  <svg width="300" height="80">
    <g fill="none" stroke-width="4">
      <path d="M10 20 L290 20" stroke="red" />
      <path d="M10 40 L290 40" stroke="#0000FF" /> <!-- Blue -->
      <path d="M10 60 L290 60" stroke="rgb(0,128,0)" /> <!-- Green -->
    </g>
  </svg>
</body>
</html>

stroke-width 属性

stroke-width 属性定义描边的粗细。该值通常是一个不带单位的数字，表示用户坐标系统中的像素值。

抱歉，你的浏览器不支持内联 SVG。

以下是展示不同描边粗细的 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Stroke Width</title>
</head>
<body>
  <svg width="300" height="80">
    <g fill="none" stroke="black">
      <path d="M10 20 L290 20" stroke-width="2" />
      <path d="M10 40 L290 40" stroke-width="4" />
      <path d="M10 60 L290 60" stroke-width="6" />
    </g>
  </svg>
</body>
</html>

stroke-linecap 属性

stroke-linecap 属性定义开放子路径（如线条或未闭合路径）末端使用的形状。它有三个可能的值：

• butt：描边在路径的终点处截断。这是默认值。
• round：描边在终点处呈圆形，圆角的半径等于 stroke-width 的一半。
• square：描边在终点处截断，但向外延伸，超出路径终点半个 stroke-width 的距离。

抱歉，你的浏览器不支持内联 SVG。

以下是展示不同线条末端样式的 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Stroke Linecap</title>
</head>
<body>
  <svg width="300" height="80">
    <g fill="none" stroke="black" stroke-width="8">
      <path d="M20 20 L280 20" stroke-linecap="butt" />
      <text x="20" y="15" font-size="10">butt</text>
      <path d="M20 40 L280 40" stroke-linecap="round" />
      <text x="20" y="35" font-size="10">round</text>
      <path d="M20 60 L280 60" stroke-linecap="square" />
      <text x="20" y="55" font-size="10">square</text>
    </g>
  </svg>
</body>
</html>

stroke-dasharray 属性

stroke-dasharray 属性用于创建虚线。它接受一个由逗号或空格分隔的数字列表，用于指定虚线段和间隔的长度。例如，stroke-dasharray=“5,5” 会创建一条由 5px 虚线段和 5px 间隔组成的线条。

抱歉，你的浏览器不支持内联 SVG。

以下是展示不同虚线图案的 SVG 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Stroke Dasharray</title>
</head>
<body>
  <svg width="300" height="80">
    <g fill="none" stroke="black" stroke-width="2">
      <path d="M10 20 L290 20" stroke-dasharray="5, 5" />
      <path d="M10 40 L290 40" stroke-dasharray="10, 10" />
      <path d="M10 60 L290 60" stroke-dasharray="20, 10, 5, 5, 5, 10" />
    </g>
  </svg>
</body>
</html>

提示： 你可以组合这些描边属性，为你的 SVG 图形创建各种轮廓样式。尝试不同的值，看看它们的效果！