SVG pointer-events Attribute

31 Mar, 2022
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="http://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="http://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:
HTML-SVG
SVG-Attribute
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.