css svg

/* 使用 CSS 控制 SVG 的样式 */

/* 示例：改变 SVG 图标的颜色 */
svg {
  fill: red; /* 设置 SVG 内部填充颜色为红色 */
}

/* 示例：使用 CSS 类来控制不同的 SVG 样式 */
.icon {
  width: 50px;
  height: 50px;
}

.icon.blue {
  fill: blue; /* 当 SVG 元素有 .blue 类时，填充颜色变为蓝色 */
}

.icon.green {
  fill: green; /* 当 SVG 元素有 .green 类时，填充颜色变为绿色 */
}

/* 示例：使用 CSS 动画效果 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.icon.spin {
  animation: rotate 2s linear infinite; /* 让 SVG 图标无限旋转 */
}

<!-- HTML 中的 SVG 示例 -->
<svg class="icon blue" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
</svg>

<svg class="icon green spin" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
</svg>

解释说明：

1. CSS 控制 SVG 填充颜色：通过 fill 属性可以改变 SVG 图形的颜色。
2. 使用类控制不同样式：通过给 SVG 元素添加不同的类（如 .blue 或 .green），可以动态地改变其样式。
3. CSS 动画：通过 @keyframes 和 animation 可以为 SVG 添加动画效果，例如旋转。

以上代码展示了如何使用 CSS 来控制和美化 SVG 图标。