SVG HTML

Specular Lighting Filter

This SVG example illustrates how to apply a specular lighting filter.

SpecularLightingFilter.svg

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <filter id="idSpecularFilter">
    <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="imgBlur" />
    <feSpecularLighting in="imgBlur" surfaceScale="5" specularConstant=".75"
      specularExponent="20" lighting-color="#bbbbbb" result="imgSpecular">
      <fePointLight x="-5" y="-10" z="200" />
    </feSpecularLighting>
    <!-- Restrict the specular highlight to the object; this is necessary. -->
    <feComposite in="imgSpecular" in2="SourceAlpha" operator="in" result="imgMasked" />
    <feComposite in="SourceGraphic" in2="imgMasked"
      operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
  </filter>
  <!-- Original Version -->
  <circle cx="100" cy="100" r="75" fill="none" stroke="red" stroke-width="10"></circle>
  <!-- Filtered Version -->
  <g style="filter: url(#idSpecularFilter)" transform="translate(200, 0)">
    <circle cx="100" cy="100" r="75" fill="none" stroke="red" stroke-width="10"></circle>
  </g>
</svg>
 

Output

 
 

© 2007–2024 XoaX.net LLC. All rights reserved.