SVG 指针事件属性

pointer-events属性允许我们定义元素是否或何时可以成为鼠标事件的目标。它应用于以下元素： 、、、、、、、、、、、、、、、、

句法：

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

属性值： pointer-events属性接受上面提到的和下面描述的值：

• auto：用于描述元素必须对指针事件做出反应。
• none：用于描述元素不响应指针事件。
• visiblePainted：当鼠标光标位于元素的内部或周边并且fill 或stroke 属性设置为非none 值时，此值只能是指针事件的目标。
• 可见填充：当鼠标光标位于元素内部时，该值只能是指针事件的目标。
• visibleStroke：当鼠标光标位于元素的周边时，此值只能是指针事件的目标。
• 可见：当鼠标光标位于元素的内部或周边时，此值只能是指针事件的目标。
• 绘制：当鼠标光标位于元素的内部或周边并且填充或笔触属性设置为非无值时，此值只能是指针事件的目标。
• fill：当指针位于元素内部时，该值只能作为指针事件的目标。
• stroke：当指针超出元素的周边时，该值只能作为指针事件的目标。
• all：当指针位于元素内部或周边时，该值只能作为指针事件的目标。

下面的例子说明了指针事件属性的使用。

示例 1：

HTML

  

    
        
            GeeksforGeeks
        
  
        
  
            
  
            
        
    
      
    
        window.addEventListener(
            'mouseup', (e) => {
                let geekColor =
                    Math.round(Math.random() *
                        0xFFFFFF)
                let fill =
                    '#' + geekColor.toString(16).
                        padStart(5, '0')
                e.target.style.fill = fill
            });
    

  

输出：

示例 2：

HTML

  

    
        
            GeeksforGeeks
        
  
        
  
            
  
            
        
    
      
    
        window.addEventListener(
            'mouseup', (e) => {
                let geekColor =
                    Math.round(Math.random()
                        * 0xFFFFFF)
                let fill =
                    '#' + geekColor.toString(16).
                        padStart(6, '0')
                e.target.style.fill = fill
            });
    

  

输出：