SVG转换效果

什么是SVG？

SVG（Scalable Vector Graphics，可缩放矢量图形）是基于XML的矢量图形格式，可以用来描述二维图形、动画和交互性。

相比于其他图像文件格式，如JPEG、PNG等，SVG图像可以无限缩放而不失真，因为它是基于矢量而非像素点组成的。此外，SVG图像也可以通过CSS和JavaScript进行交互，从而增加更多的表现力和互动性。

SVG转换效果

SVG转换效果指的是将SVG图像应用转换效果，从而使图像呈现出不同的表现风格。以下是常见的SVG转换效果：

1. 填充色转换

这种转换效果适用于改变SVG图形的填充色。可以通过CSS动画或JavaScript控制颜色的渐变、闪烁等变化效果。

以下是一个简单的SVG填充色转换的代码片段，当鼠标悬停在圆形上时，圆形的填充色会渐变为蓝色：

<svg width="100" height="100">
  <circle id="circle" cx="50" cy="50" r="40" fill="red" />
  <script>
    var circle = document.getElementById("circle");
    circle.addEventListener("mouseover", function () {
      this.style.transition = "fill 0.5s";
      this.style.fill = "blue";
    });

    circle.addEventListener("mouseout", function () {
      this.style.transition = "fill 0.5s";
      this.style.fill = "red";
    });
  </script>
</svg>

2. 边框转换

通过CSS控制SVG图形的边框大小、颜色等属性，常常用于实现鼠标悬停时的边框高亮效果。

以下是一个简单的SVG边框转换的代码片段，当鼠标悬停在矩形上时，矩形的边框会变粗并变为蓝色：

<svg width="100" height="100">
  <rect id="rect" x="10" y="10" width="80" height="80" stroke="black" stroke-width="1" />
  <script>
    var rect = document.getElementById("rect");
    rect.addEventListener("mouseover", function () {
      this.style.transition = "stroke 0.5s, stroke-width 0.5s";
      this.style.stroke = "blue";
      this.style.strokeWidth = "5";
    });

    rect.addEventListener("mouseout", function () {
      this.style.transition = "stroke 0.5s, stroke-width 0.5s";
      this.style.stroke = "black";
      this.style.strokeWidth = "1";
    });
  </script>
</svg>

3. 形状转换

可以通过CSS3的变形属性（transform）对SVG图像进行旋转、平移、缩放等变换，实现形状转换的效果。例如可以将一个矩形旋转一定角度、翻转等等效果。

以下是一个简单的SVG形状转换的代码片段，将矩形旋转45度：

<svg width="100" height="100">
  <rect x="10" y="10" width="80" height="80" fill="red" transform="rotate(45, 50, 50)" />
</svg>

总结

SVG转换效果可以通过CSS和JavaScript实现，可以让SVG图像呈现出更加酷炫的效果和更多的交互性。不同的SVG转换效果可以组合使用，从而创造出更多的表现效果。