【CSS】SVG图片属性及修改颜色

在CSS中，我们可以使用SVG图片作为背景，并通过CSS的fill属性来修改颜色。以下是一些方法：

方法一：直接在SVG图片上修改颜色

如果你有直接访问SVG文件的权限，你可以直接在SVG文件中修改颜色。

例如，你有一个SVG文件，内容如下：

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#000000"/></svg>

你可以直接修改fill属性的值来改变颜色。

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#FFFFFF"/></svg>

方法二：在CSS中使用SVG作为背景，并修改颜色

如果你不能直接修改SVG文件，你可以将SVG作为背景图片，并使用CSS的fill属性来修改颜色。

例如，你有一个SVG文件，内容如下：

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50"><path d="M25 3.6C14.3 3.6 3.6 14.3 3.6 25s10.7 21.4 21.4 21.4 21.4-10.7 21.4-21.4S35.9 3.6 25 3.6zM25 46.5C17.4 46.5 6.8 39.6 6.8 25S17.4 6.8 25 6.8s18.2 17.4 18.2 18.2-0.2 18.2-18.2 18.2z" fill="#000000"/></svg>

你可以在CSS中这样使用：

.icon {
  background-image: url('path/to/your/svg');
  background-size: cover;
  fill: #FFFFFF; /* 修改颜色 */
  width: 50px;