设置 SVG 的边框颜色 - CSS

在 Web 开发中，SVG 是一种流行的图形格式。在处理 SVG 图形时，我们经常需要为其添加边框。下面介绍如何使用 CSS 设置 SVG 的边框颜色。

方法一：使用 SVG 的属性设置边框颜色

SVG 本身提供了 stroke 属性，可以用来设置 SVG 边框的颜色。具体的步骤如下：

1. 在 SVG 元素中添加 stroke-width 属性，并设置边框的宽度值。
2. 在 SVG 元素中添加 stroke 属性，并设置边框颜色。

示例代码如下：

<svg width="100" height="100">
  <rect x="20" y="20" width="60" height="60" 
        stroke-width="2" stroke="#f00" fill="#fff" />
</svg>

在上面的代码中，我们使用了 rect 元素创建了一个矩形，使用 stroke-width 属性设置了边框的宽度，使用 stroke 属性设置了边框的颜色。

方法二：使用 CSS 设置 SVG 的边框颜色

我们还可以通过 CSS 设置 SVG 的边框颜色。具体的步骤如下：

1. 为 SVG 元素添加一个类名，例如 border。
2. 在 CSS 中为 .border 类名设置 stroke-width 和 stroke 属性。

示例代码如下：

<svg class="border" width="100" height="100">
  <rect x="20" y="20" width="60" height="60" fill="#fff" />
</svg>

<style>
  .border {
    stroke-width: 2;
    stroke: #f00;
  }
</style>

在上面的代码中，我们为 SVG 元素添加了一个类名 border，并在 CSS 中为该类名设置了 stroke-width 和 stroke 属性。注意，我们在 SVG 元素中没有设置 stroke-width 和 stroke 属性，而是将这些样式统一放在了 CSS 中，这样可以让样式的管理更加方便。

至此，我们介绍了两种方法来设置 SVG 的边框颜色。根据具体的需要，可以选择任意一种方法进行操作。