SVG 元素

SVG 元素定义了合并滤镜效果的一组输入图像。可以与其他滤镜效果一起使用，如 元素和 元素。

语法

<filter>
  <feMerge>
    <feMergeNode [in="SourceGraphic" | SourceAlpha | ...] />
    <feMergeNode [in="SourceGraphic" | SourceAlpha | ...] />
    ...
  </feMerge>
</filter>

属性

| 属性 | 描述 | | -------- | ------------------------------------------------------------ | | <feMergeNode> | 定义一个输入图像，可以定义多个 | | in | 定义输入图像的来源，可以使用 "SourceGraphic" 、 "SourceAlpha" 等等 |

代码示例

<svg width="200" height="200" >
  <defs>
    <filter id="merge" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
      <feMerge>
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="SourceAlpha" />
      </feMerge>
    </filter>
  </defs>
  
  <rect x="10" y="10" width="100" height="100" style="fill:red;filter:url(#merge);" />
</svg>

这段代码会创建一个合并滤镜效果，在一个红色的矩形上，同时应用了输入图像和输入图像的 Alpha 通道。

注意事项

• 可以使用多个 <feMergeNode> 定义多个输入图像，用于合并到一个图像中。
• 合并滤镜效果可以与其他滤镜效果一起使用。