SVG CSS颜色

SVG（Scalable Vector Graphics）是一种用于描述二维图形的XML标记语言，它支持动态变化和互动性。在SVG中，我们可以使用CSS（Cascading Style Sheets）来控制图形的外观和样式，包括颜色、字体、大小等。本文将重点介绍SVG中如何使用CSS来控制图形的颜色。

SVG基础

在SVG中，我们可以使用<svg>元素来创建一个SVG图形，例如一个简单的矩形：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

上面的代码创建了一个宽高为100的SVG画布，并在画布上绘制了一个红色的矩形，矩形的左上角坐标为(10,10)，宽高为80。

SVG颜色

在SVG中，我们可以使用fill属性来设置图形的填充颜色，使用stroke属性来设置图形的边框颜色。颜色可以使用常见的颜色名称（如”red”、”green”）或者十六进制颜色代码（如”#ff0000″、”#00ff00″）来表示。

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" stroke="blue" stroke-width="2" />
</svg>

上面的代码创建了一个红色填充、蓝色边框、宽度为2的矩形。我们也可以通过CSS来设置图形的颜色：

<style>
  .shape {
    fill: red;
    stroke: blue;
    stroke-width: 2;
  }
</style>

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" class="shape" />
</svg>

SVG CSS样式

除了内联样式和外部样式表，我们还可以使用<style>元素内嵌CSS样式来设置SVG图形的样式。例如，以下代码定义了一个CSS类shape，并应用到矩形上：

<style>
  .shape {
    fill: red;
    stroke: blue;
    stroke-width: 2;
  }
</style>

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" class="shape" />
</svg>

在SVG中，CSS样式会遵循CSS选择器的规则，我们可以使用类、ID、属性选择器等来选择SVG元素和应用样式。

SVG渐变

SVG还支持渐变色，我们可以使用线性渐变和径向渐变来创建更丰富的颜色效果。以下是一个简单的线性渐变示例：

<svg width="100" height="100">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="url(#grad1)" />
</svg>

上面的代码创建了一个从黄色到红色的线性渐变矩形。我们可以通过调整x1、y1、x2、y2的值来改变渐变的方向和位置。

SVG滤镜

除了渐变，SVG还支持滤镜效果，可以实现阴影、模糊等效果。以下是一个简单的阴影效果：

<svg width="100" height="100">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="5" dy="5" stdDeviation="5" flood-color="black" />
    </filter>
  </defs>
  <rect x="10" y="10" width="80" height="80" fill="red" filter="url(#shadow)" />
</svg>

上面的代码创建了一个带有阴影效果的红色矩形。我们可以通过调整dx、dy、stdDeviation等参数来改变阴影的位置和大小。