by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11200
本文可全文转载，独立域名个人网站无需授权，但需要保留原作者、出处以及文中链接，任何网站均可摘要聚合，商用请联系授权。

一、故事的背景

故事的背景是这样的，前段时间，有位同行咨询了我这么个问题：

大佬，请教一下，css有没有办法在不增加dom元素的情况下，将一个元素的样式 copy多一个出来？

像这样，是两个

如下图所示：

然后这是后续的对话：

已经没有年轻时勤奋的我后来也没有去化时间调试。

没想到，过了几日，这位同行说自己使用SVG滤镜搞定了，还发过来的示意demo。

啧啧啧，这明显一看就是个人才。

然后，最近不是在重新系统学习SVG的滤镜嘛，正好其中用到的最关键的代码就是feMerge和feMergeNode元素，因此，就决定，以此需求为案例，给大家讲讲这两个滤镜元素的语法和作用。

二、关于feMerge滤镜

SVG中的<feMerge>元素允许同时应用多个滤镜效果，而不是按顺序应用。最终效果的实现需要借助<feMergeNode>子元素，而<feMergeNode>的输入内容是其他滤镜执行的result结果，或者是内置的输入关键字，如最常用的SourceGraphic，表示应用滤镜的原始资源，在CSS中应用SVG滤镜的话，SourceGraphic就表示应用该CSS的HTML元素。

feMerge的MDN文档提供了一个案例，其实基本上就是上面DOM样式复制需求的实现代码了。

SVG代码如下：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="feOffset" x="-40" y="-20" width="100" height="200">
    <feOffset in="SourceGraphic" dx="60" dy="60" />
    <feGaussianBlur stdDeviation="5" result="blur2" />
    <feMerge>
      <feMergeNode in="blur2" />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <rect
    x="40"
    y="40"
    width="100"
    height="100"
    style="stroke: #000000; fill: green; filter: url(#feOffset);" />
</svg>

实时渲染效果为：

可以看到，原本一个绿色矩形元素，最后渲染的效果是两个，并且有偏移。

三、举一反三，案例实现

接下来，我们就可以基于上面那个MDN提供的案例，实现DOM元素的偏移克隆外加半透明的效果。

花了半个小时，demo整出来了，先看实现的效果，截图奉上，当当当当。

可以看到，普普通通的按钮元素应用了SVG滤镜之后，多了个半透明的另外一个按钮。

眼见为实，您可以狠狠地点击这里：SVG feMerge滤镜复制HTML元素样式demo

应用代码

完整的SVG代码如下所示：

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="offsetOpacity" width="100" height="200">
    <feOffset in="SourceGraphic" dx="20" dy="20" />
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5" />
    </feComponentTransfer>
    <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>

此时，想要元素出现半透明的偏移投影，只需要一行CSS代码就可以了，例如：

button {
  filter: url(#offsetOpacity);
}

实现原理

<feComponentTransfer>通常和子元素 <feFuncR>, <feFuncB>, <feFuncG> 以及 <feFuncA>一起使用，用来设置图形的 R、G、B或A的通道颜色变化。

因此，我们可以使用<feComponentTransfer>和<feFuncA>这两个滤镜元素实现SVG图形的半透明效果。

至于<feOffset>元素，这个没什么好说的，实现位置偏移的。

两者相互结合，就实现了我们需要的复制DOM元素的样式，同时偏移+半透明的效果了。

与SMIL animation配合

SVG SMIL animation支持在滤镜元素中设置，因此，我们还可以让投影的图形有动画效果，无论是位置移动还是透明度变化都是可以的。

下面的SVG代码实现的是透明度不断从0到50%来回变化的效果：

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="offsetOpacityAnimate" width="100" height="200">
    <feOffset in="SourceGraphic" dx="20" dy="20">
      <!-- Chrome 需要这个才有动画效果 -->
      <animate attributeName="x" />
    </feOffset>
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.5">
          <animate attributeName="slope" values="0.5;0;0.5" dur="3s" repeatCount="indefinite" />
      </feFuncA>
    </feComponentTransfer>
    <feMerge>
      <feMergeNode />
      <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>
</svg>

很奇怪，在Chrome浏览器下，需要在<feOffset<滤镜中弄一个不起任何作用但是合法的 <animate> 动画才行，Firefox不会如此，我感觉像是Chrome的bug。

最终实现的效果如下截图所示：

当然，最直观的效果体验还是访问demo页面。

四、三言两语feMergeNode元素

<feMergeNode>只能是<feMerge>的子元素存在，作用是获取其他滤镜执行的结果。

支持属性值 in，表示滤镜输入的结果。

如果不指定in属性，则默认使用外部没有指定result的滤镜作为输入结果。

这个元素本身没什么好讲的。

五、要不就这样结语？

差不多就这些吧。

稍微展示了一点SVG滤镜的能力。

SVG滤镜还是很强的，还有很多滤镜元素会在后面陆续介绍。

如果可以完全通透，有足够多的积累，那么在图形表现领域这块，绝对可以成为高手，而且是那种竞争力很强的高手。

因为相关技术门槛高，实现效果好。

等时机差不多，我就弄个SVG滤镜学习小册，嘿嘿。

看了下，月底了，本文应该是这个月最后一篇文章了。

最近更新节奏比之前慢了一点，哎呀，为兴趣买单啊，钓鱼和小说，占据了不少时间和精力，对了，还有CSS世界三部曲精讲系列的更新。

第三讲会试试使用头戴式相机拍摄，倒时候看看效果吧。

要是你觉得本文还不错，欢迎点赞、分享！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11200

（本篇完）