一、SVG基础

SVG（Scalable Vector Graphics）是一种基于XML描述2D图形的语言。与其它格式不同，SVG图像可以被无损放大或缩小而不失真。它可以用来绘制各种静态或动态图像，例如图标、线条图形和交互式图形。SVG图像可以通过使用CSS语言来修改外观，其中包括颜色。

二、CSS修改SVG颜色的方法

1. 使用stroke和fill属性

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

在SVG中，元素可以使用stroke和fill属性来定义外边框和填充颜色。在上面的代码中，我们定义了一个矩形，并给它一个红色的填充色和一个蓝色的边框。可以用CSS修改颜色。

rect { fill: green; stroke: orange; }

在上面的CSS中，我们把矩形的填充色改为绿色，边框颜色改为橙色。

2. 使用CSS样式类

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

我们可以给SVG元素指定一个CSS样式类，并使用CSS样式类中的规则来修改属性。可以在SVG元素中使用class属性来指定一个样式类。

.myRect { fill: purple; stroke: yellow; }

在上面的CSS代码中，我们把样式类.myRect中的填充色改为紫色，边框颜色改为黄色。

3. 修改svg中的路径颜色

<svg width="100" height="100"> <path d="M10 10 H 90 V 90 H 10 L 10 10 Z" fill="none" stroke="black" stroke-width="3" /> </svg>

在SVG中，<path>元素代表一个路径。路径可以包含直线、曲线、圆弧等。使用d属性定义路径，使用stroke属性设置路径的颜色。

path { stroke: green; }

在上面的CSS代码中，我们把路径的颜色改为绿色。

三、总结

SVG图像可以使用CSS修改颜色。可以通过stroke和fill属性、CSS样式类或修改路径颜色来实现这一点。