.svg格式怎么设置颜色css|极客教程

.svg格式怎么设置颜色css

在网页开发中，SVG（可缩放矢量图形）是一种常见的图形格式，它可以在不失真的情况下对图像进行缩放。SVG 文件是一种基于 XML 格式的矢量图形图像。在实际应用中，我们经常需要在网页中展示 SVG 图标或图形，并且希望通过 CSS 来控制 SVG 图形的颜色。

SVG 格式简介

SVG 是一种基于 XML 的图形格式，它可以用来描述图形和图像。与传统的图像格式（如 JPEG、PNG）不同，SVG 是矢量图形，可以无限放大而不会失真。

一个简单的 SVG 文件如下所示：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

以上代码创建了一个宽高都为 100px 的 SVG 画布，画布中心有一个半径为 40px 的红色圆形。

使用 CSS 控制 SVG 颜色

方法一：通过 `fill` 属性控制颜色

在 SVG 中，填充色通常由 fill 属性来控制。我们可以通过 CSS 直接修改 fill 属性来改变 SVG 图形的填充颜色。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" />
</svg>

<style>
  circle {
    fill: green;
  }
</style>

上面的代码中，SVG 中的圆形的填充颜色原本是蓝色的，但是通过 CSS 中的 fill: green; 来修改为绿色。

方法二：通过 `stroke` 属性控制颮线颜色

SVG 中的图形线条颜色通常由 stroke 属性来控制。我们可以通过 CSS 直接修改 stroke 属性来改变 SVG 图形的线条颜色。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" />
</svg>

<style>
  circle {
    stroke: red;
  }
</style>

上面的代码中，SVG 中的圆形的线条颜色原本是黑色的，但是通过 CSS 中的 stroke: red; 来修改为红色。

方法三：使用 `class` 和 `CSS` 控制颜色

除了直接在 SVG 元素上使用 fill 和 stroke 属性控制颜色外，我们还可以通过为 SVG 元素添加 class，然后通过 CSS 控制这个 class 中的 fill 和 stroke 属性来实现对 SVG 颜色的控制。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" class="custom-color" />
</svg>

<style>
  .custom-color {
    fill: purple;
    stroke: orange;
  }
</style>

上面的代码中，SVG 中的圆形通过添加 custom-color 类来控制填充和线条颜色，可以通过 CSS 中 .custom-color 来修改颜色。