SVG 滤镜

简单示例

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>

SVG 中可用的滤镜元素

TIP

对同一个 SVG 元素，你可以同时使用多个滤镜元素。

• <feBlend />: Combines two graphics together by a certain blending mode
• <feColorMatrix />: Changes colors based on a transformation matrix
• <feComponentTransfer />: Performs component-wise remapping of data for each pixel. Can adjust brightness, contrast, color balance, etc
• <feComposite />: Performs combination of two input images pixel-wise in image space using a compositing operation
• <feConvolveMatrix />: Applies a matrix convolution filter effect (this includes blurring, edge detection, sharpening, embossing and beveling)
• <feDiffuseLighting />: Lights a graphic by using the alpha channel as a bump map
• <feDisplacementMap />: Uses pixels values from the graphic from in2 attribute to displace the image from the in attribute
• <feDistantLight />: Specifies a distant light source to be used inside a lighting filter primitive: <feDiffuseLighting /> or <feSpecularLighting />
• <feDropShadow />: Creates a drop shadow of the graphic
• <feFlood />: Fills the filter subregion with the color and opacity defined by flood-color and flood-opacity attributes
• <feGaussianBlur />: Blurs the graphic
• <feImage />: Gets graphic data from an external source and provides the pixel data as output
• <feMerge />: Blends input graphic layers (applies filter effects concurrently instead of sequentially)
• <feMergeNode />: Takes the result of another filter to be processed by its parent <feMerge />
• <feMorphology />: Erodes or dilates the graphic (for fattening or thinning effects)
• <feOffset />: Offsets the input graphic
• <fePointLight />: Specifies a light source that allows creating a point light effect
• <feSpecularLighting />: Lights a source graphic by using the alpha channel as a bump map
• <feSpotLight />: Specifies a light source that allows creating a spotlight effect
• <feTile />: Fills a target rectangle with a repeated pattern of an input graphic
• <feTurbulence />: Creates a graphic with the Perlin turbulence function