SVG-好玩的特效

SVG是一种基于XML的矢量图形格式，常用于Web场景中。SVG不仅能够高效地展示图像，而且能够实现各种炫酷的特效。

以下是一些常见的SVG特效：

1. 渐变

SVG中的渐变可以实现从一种颜色到另一种颜色的平滑过渡。常见的渐变类型有线性渐变和径向渐变。

线性渐变

线性渐变指的是在两个点之间的颜色渐变，可以是水平、垂直或斜向的。下面是一个例子：

<svg>
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#f00;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#00f;stop-opacity:1" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="200" height="100" fill="url(#gradient)" />
</svg>

其中，x1, y1, x2, y2决定了渐变的方向，stop标签中的offset属性决定了渐变的位置，stop-color属性决定了颜色。

径向渐变

径向渐变用一个原点和一个半径来定义，可以是圆形或椭圆形的。下面是一个例子：

<svg>
  <defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="50%">
      <stop offset="0%" style="stop-color:#f00;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#00f;stop-opacity:1" />
    </radialGradient>
  </defs>
  <rect x="10" y="10" width="200" height="100" fill="url(#gradient)" />
</svg>

其中，cx, cy决定了渐变的中心，r决定了渐变的半径。

2. 动画

SVG中的动画是通过定义一个或多个关键帧来实现的。下面是一个简单的例子：

<svg>
  <circle cx="50" cy="50" r="10" fill="#f00">
    <animate attributeName="cx" from="50" to="250" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

其中，animate标签定义了一个动画，attributeName指定了要动画的属性，from和to指定了起始和结束值，dur指定了动画持续的时间，repeatCount指定了动画重复的次数。

3. 滤镜

SVG中的滤镜可以通过对图像进行去噪、模糊、发光等处理，来产生炫酷的效果。下面是一个例子：

<svg>
  <defs>
    <filter id="filter">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
      <feOffset dx="0" dy="0" result="offsetblur" />
      <feFlood flood-color="red" flood-opacity="0.3" result="flood" />
      <feComposite in2="offsetblur" operator="in" />
      <feComposite in2="SourceGraphic" operator="over" />
    </filter>
  </defs>
  <circle cx="50" cy="50" r="20" fill="#f00" filter="url(#filter)" />
</svg>

其中，feGaussianBlur标签表示高斯模糊，stdDeviation属性表示模糊半径，feFlood标签表示填充颜色，feOffset标签表示偏移，feComposite标签表示合成。

以上就是SVG中的一些常见特效，更多特效可以参考SVG官方文档。