SVG pointer-events Attribute

Last Updated : 23 Jul, 2025

The pointer-events attribute allows us to define whether or when an element may be the target of a mouse event. It is applied on the following elements: <a>, <circle>, <clipPath>, <defs>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <use>.

Syntax:

pointer-events = bounding-box | visiblePainted | visibleFill | 
                 visibleStroke | visible | painted | fill |
                 stroke | all | none

Attribute Values:

The pointer-events attribute accepts the values mentioned above and described below:

  • auto: It is used to describe that an element must react to pointer events.
  • none: It is used to describe that an element does not react to pointer-events.
  • visiblePainted: This value can only be the target of a pointer event when the mouse cursor is over the interior or the perimeter of the element and the fill or stroke property is set to a value other than none.
  • visibleFill:  This value can only be the target of a pointer event when a mouse cursor is over the interior of the element.
  • visibleStroke: This value can only be the target of a pointer event when the mouse cursor is over the perimeter of the element.
  • visible: This value can only be the target of a pointer event when the mouse cursor is over either the interior or the perimeter of the element.
  • painted: This value can only be the target of a pointer event when the mouse cursor is over the interior or the perimeter of the element and the fill or stroke property is set to a value other than none.
  • fill: This value can only be the target of a pointer event when the pointer is over the interior of the element.
  • stroke: This value can only be the target of a pointer event when the pointer is over the perimeter of the element.
  • all: This value can only be the target of a pointer event when the pointer is over the interior or the perimeter of the element.

Below examples illustrate the use of pointer-events attribute.

Example 1:

HTML
<!DOCTYPE html>
<html>

<body>
    <div style="color: green;">
        <h2>
            GeeksforGeeks
        </h2>

        <svg viewBox="0 0 100 10" 
            xmlns="https://www.w3.org/2000/svg">

            <rect x="3" y="0" height="10" 
                width="10" fill="green" />

            <ellipse cx="8" cy="5" rx="5" ry="4" 
                fill="black" 
                pointer-events="visiblePainted" />
        </svg>
    </div>
    
    <script>
        window.addEventListener(
            'mouseup', (e) => {
                let geekColor =
                    Math.round(Math.random() *
                        0xFFFFFF)
                let fill =
                    '#' + geekColor.toString(16).
                        padStart(5, '0')
                e.target.style.fill = fill
            });
    </script>
</body>

</html>

Output:

Example 2:

HTML
<!DOCTYPE html>
<html>

<body>
    <div style="color: green;">
        <h2>
            GeeksforGeeks
        </h2>

        <svg viewBox="0 0 100 10" 
            xmlns="https://www.w3.org/2000/svg">

            <rect x="3" y="0" height="10" 
                width="10" fill="green" />

            <ellipse cx="8" cy="5" rx="5" 
                ry="4" fill="black" 
                pointer-events="none" />
        </svg>
    </div>
    
    <script>
        window.addEventListener(
            'mouseup', (e) => {
                let geekColor =
                    Math.round(Math.random()
                        * 0xFFFFFF)
                let fill =
                    '#' + geekColor.toString(16).
                        padStart(6, '0')
                e.target.style.fill = fill
            });
    </script>
</body>

</html>

Output:

Comment

Explore