SVG光影滤镜应用在按钮实例页面

效果：

默认按钮

应用滤镜

代码：

CSS代码：

.filter {
    filter: url(#spotlight);
}

HTML代码：

<svg
  width="0"
  height="0"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="spotlight">
      <feSpecularLighting
        result="spotlight"
        specularConstant="0.5"
        specularExponent="50"
        lighting-color="#FFF">
        <fePointLight x="20" y="10" z="50" />
      </feSpecularLighting>
      <feComposite
        in="SourceGraphic"
        in2="spotlight"
        operator="arithmetic"
        k1="0"
        k2="1"
        k3="1"
        k4="0" />
    </filter>
  </defs>
</svg>

<h4>默认按钮</h4>
<button type="primary" is="ui-button">我是按钮</button>

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