CSS SVG 路径带边框

在本文中，我们将介绍如何使用CSS为SVG路径添加边框。SVG（Scalable Vector Graphics）是一种基于XML的图像格式，常用于在网页上显示图形和图标。SVG路径由一系列命令和参数组成，描述了路径的形状。通过为路径添加边框，我们可以使SVG图形更具吸引力和可读性。

阅读更多：CSS 教程

CSS 边框属性

要在SVG路径中添加边框，我们需要使用CSS的边框属性。CSS提供了多种边框属性，包括border-width（边框宽度）、border-color（边框颜色）和border-style（边框样式）。下面是一些常用的边框样式示例：

.path {
  stroke: blue; /* 设置路径颜色 */
  stroke-width: 2px; /* 设置路径宽度 */
  fill: none; /* 不填充路径内部 */
}

在上面的示例中，我们使用stroke属性设置路径的颜色为蓝色，stroke-width属性设置路径的宽度为2像素，并使用fill属性设置路径内部不填充颜色。

SVG 路径语法

在使用CSS为SVG路径添加边框之前，我们需要了解SVG路径的语法。SVG路径由一系列命令和参数组成，可以用来描述直线、曲线、圆弧等形状。下面是一些常用的SVG路径命令：

M：将绘图游标移动到指定的坐标位置。例如，M10 10将游标移动到(10, 10)的位置。
L：绘制一条直线到指定的坐标位置。例如，L20 20将从当前位置绘制一条直线到(20, 20)的位置。
H：绘制一条水平线到指定的X坐标位置。例如，H30将从当前位置绘制一条水平线到X坐标为30的位置。
V：绘制一条垂直线到指定的Y坐标位置。例如，V40将从当前位置绘制一条垂直线到Y坐标为40的位置。
C：绘制一条三次贝塞尔曲线到指定的坐标位置。例如，C50 50，80 80，100 100将绘制一条三次贝塞尔曲线到(100, 100)的位置，控制点分别为(50, 50)和(80, 80)。
Z：关闭当前路径，将绘图游标移动到路径起点。例如，Z将关闭当前路径，游标移动到路径起点。

通过在SVG路径中使用这些命令和参数，我们可以绘制出各种形状和曲线。

为SVG路径添加边框

要为SVG路径添加边框，我们可以使用stroke属性设置边框的颜色，使用stroke-width属性设置边框的宽度。下面是一个示例：

.path {
  stroke: blue; /* 设置边框颜色 */
  stroke-width: 2px; /* 设置边框宽度 */
  fill: none; /* 不填充路径内部 */
}

在上面的示例中，我们为路径设置了蓝色的边框，宽度为2像素，并且不填充路径内部。这样就为SVG路径添加了边框效果。

除了基本的边框属性之外，我们还可以使用stroke-linejoin属性设置路径线段的连接方式，stroke-linecap属性设置路径线段的末端样式。下面是一些常用的属性值示例：

.path {
  stroke: blue; /* 设置边框颜色 */
  stroke-width: 2px; /* 设置边框宽度 */
  stroke-linejoin: round; /* 设置线段连接为圆角 */
  stroke-linecap: square; /* 设置线段末端为方形 */
  fill: none; /* 不填充路径内部 */
}

在上面的示例中，我们将路径线段的连接方式设置为圆角，将线段的末端样式设置为方形。

示例

下面是一个完整的示例，展示了如何使用CSS为SVG路径添加边框：

<svg width="400" height="400">
  <path class="path" d="M10 10 L100 100 L200 10" />
</svg>

<style>
.path {
  stroke: blue; /* 设置边框颜色 */
  stroke-width: 2px; /* 设置边框宽度 */
  fill: none; /* 不填充路径内部 */
}
</style>

在上面的示例中，我们使用path元素定义了一个SVG路径，并为该路径添加了边框。路径由三个端点组成，通过M和L命令分别指定了每个端点的坐标。