SVG不同光源下的按钮滤镜实例页面

CSS代码：

.lightMe1 {
    filter: url(#lightMe1);
}
.lightMe2 {
    filter: url(#lightMe2);
}
.lightMe3 {
    filter: url(#lightMe3);
}

HTML代码：

<svg
  width="0"
  height="0"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter id="lightMe1">
        <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
          <fePointLight x="20" y="10" z="40" />
        </feDiffuseLighting>
    
        <feComposite
          in="SourceGraphic"
          in2="light"
          operator="arithmetic"
          k1="1"
          k2="0"
          k3="0"
          k4="0" />
      </filter>
      <filter id="lightMe2">
        <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
          <feDistantLight azimuth="240" elevation="20" />
        </feDiffuseLighting>
    
        <feComposite
          in="SourceGraphic"
          in2="light"
          operator="arithmetic"
          k1="1"
          k2="0"
          k3="0"
          k4="0" />
      </filter>
      
      <filter id="lightMe3">
        <feDiffuseLighting in="SourceGraphic" result="light" lighting-color="white">
          <feSpotLight
            x="10"
            y="5"
            z="30"
            limitingConeAngle="20"
            pointsAtX="50"
            pointsAtY="20"
            pointsAtZ="0" />
        </feDiffuseLighting>
    
        <feComposite
          in="SourceGraphic"
          in2="light"
          operator="arithmetic"
          k1="1"
          k2="0"
          k3="0"
          k4="0" />
      </filter>
  </defs>
</svg>

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


<h4>点光源</h4>
<button type="primary" class="lightMe1" is="ui-button">我是按钮</button>

<h4>平行光源</h4>
<button type="primary" class="lightMe2" is="ui-button">我是按钮</button>

<h4>聚光光源</h4>
<button type="primary" class="lightMe3" is="ui-button">我是按钮</button>