html中css矢量图变换颜色

HTML 中的 CSS 矢量图（通常指 SVG，Scalable Vector Graphics）可以轻松地通过 CSS 进行颜色变换。你可以直接应用 `fill` 或 `stroke` 属性来改变图形的颜色，例如：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="#ff0000"> <!-- 红色 -->
  </rect>
</svg>

<style>
  rect {
    /* 可以动态改变颜色 */
    fill: blue; /* 蓝色 */
    transition: fill 2s; /* 添加动画效果，颜色从红色平滑过渡到蓝色 */
  }
  
  rect:hover {
    fill: green; /* 鼠标悬停时变为绿色 */
  }
</style>

在这个例子中，矩形元素的初始填充颜色是红色，鼠标悬停时会变成绿色，而且颜色变化有2秒的过渡效果。`transition`属性允许创建颜色渐变动画。