SVG pointer-events Attribute
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"
< 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"
< 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:
Last Updated :
31 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...