SVG FESpotLightElement.pointsAtX Property

The pointsAtX property of the SVG FESpotLightElement interface represents the x coordinate of the point at which the light source is pointing.

Syntax

const pointsAtX = element.pointsAtX.baseVal;
element.pointsAtX.baseVal = pointsAtX;

• pointsAtX: a read/write attribute that represents the x coordinate of the point at which the light source is pointing.

Example

<svg height="100" width="100">
  <defs>
    <filter id="spotlight">
      <feSpotLight 
        x="50" 
        y="50" 
        z="25" 
        pointsAtX="50" 
        pointsAtY="50" 
        pointsAtZ="0" 
        specularExponent="50" 
        limitingConeAngle="45" 
        in="SourceGraphic" />
    </filter>
  </defs>
  
  <rect x="10" y="10" width="80" height="80" fill="#2980b9" filter="url(#spotlight)" />
</svg>

In this example, we define an SVG filter named "spotlight" using the feSpotLight element, and apply it to a rectangle element. The pointsAtX property of the feSpotLight element is set to 50, which makes the light source point towards the middle of the rectangle.

Remarks

The pointsAtX property is part of the SVG Filters Module and is supported in all modern browsers. It is mainly used to create spotlight effects or specular highlights in 3D scenes.

When the pointsAtX attribute is updated, it will trigger a SVGAnimatedNumber object that can be accessed through the baseVal property of the pointsAtX attribute.

It is important to note that the feSpotLight element requires some other attributes, such as x, y, z, pointsAtY, pointsAtZ, specularExponent, and limitingConeAngle, to be set in order to work properly.

Conclusion

The SVG FESpotLightElement.pointsAtX property is a useful attribute for controlling the direction and intensity of light sources in SVG filters. By setting the pointsAtX property to specific values, we can create different lighting effects that add depth and dimensionality to our SVG graphics.