SVG 滤镜 - 平台梦

在SVG中，滤镜（Filter）是一种用于图形效果处理的技术，它可以被应用于SVG元素，从而改变它们的外观或添加特殊效果。以下是一个简单的SVG滤镜的例子：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义高斯模糊滤镜 -->
    <filter id="blurFilter" x="0" y="0" width="100%" height="100%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
  </defs>

  <!-- 应用滤镜的矩形 -->
  <rect width="150" height="80" fill="lightblue" stroke="black" stroke-width="2" x="25" y="10" filter="url(#blurFilter)" />
</svg>

在这个例子中：

<defs> 元素用于定义滤镜，其中 id="blurFilter" 定义了滤镜的唯一标识符。

<filter> 元素包含了实际的滤镜效果，这里使用了 <feGaussianBlur> 来实现高斯模糊。stdDeviation 属性定义了模糊的程度。

<rect> 元素是一个矩形，其中 filter="url(#blurFilter)" 属性应用了之前定义的滤镜。

在这个例子中，矩形被填充为浅蓝色，具有黑色的边框，并且应用了一个高斯模糊的滤镜效果。

除了高斯模糊外，SVG还提供了其他滤镜效果，如锐化、颜色矩阵、阴影等。你可以根据需要选择适合你设计的滤镜效果，并通过调整滤镜属性来定制外观。滤镜为SVG添加了丰富的视觉效果，使得图形在渲染时更具有吸引力。

转载请注明出处：http://www.pingtaimeng.com/article/detail/12387/SVG