SVG feMerge滤镜复制HTML元素样式实例页面

CSS代码：

.filter {
    filter: url(#offsetOpacity);
}
.filter-animate {
    filter: url(#offsetOpacityAnimate);
}

HTML代码：

<h4>原始按钮</h4>
<button type="primary" class="ui-button">按钮</button>

<h4>应用滤镜后</h4>
<button type="primary" class="ui-button filter">按钮</button>

<h4>滤镜同时动画</h4>
<button type="primary" class="ui-button filter-animate">按钮</button>

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>

<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>