SVG pointer-events属性用法及代码示例

pointer-events属性允许我们定义元素是否或何时成为鼠标事件的目标。它应用于以下元素：<a>，<circle>，<clipPath>，<defs>，<ellipse>，<foreignObject>，<g>，<image>，<line>，<marker>，<mask >，<path>，<pattern>，<polygon>，<polyline>，<rect>，<svg>，<switch>，<symbol>，<text>，<textPath>，<tspan>，<use>。

用法:

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

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

auto:它用于描述元素必须对指针事件作出反应。
none:它用于描述元素不响应pointer-events。
visiblePainted:仅当鼠标光标位于元素的内部或外围并且并且fill或stroke属性设置为除none之外的其他值时，此值才可以成为指针事件的目标。
visibleFill:当鼠标光标悬停在元素内部时，此值只能是指针事件的目标。
visibleStroke:当鼠标光标悬停在元素的外围时，此值只能是指针事件的目标。
visible:当鼠标光标悬停在元素的内部或外围时，此值只能是指针事件的目标。
painted:仅当鼠标光标位于元素的内部或外围并且并且fill或stroke属性设置为除none之外的其他值时，此值才可以成为指针事件的目标。
fill:当指针位于元素内部时，此值只能是指针事件的目标。
stroke:当指针超出元素的范围时，此值只能是指针事件的目标。
all:当指针在元素的内部或外围上方时，此值只能是指针事件的目标。

以下示例说明了pointer-events属性的用法。

范例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>

输出：

范例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>

输出：

相关用法

注：本文由纯净天空筛选整理自thacker_shahid大神的英文原创作品 SVG pointer-events Attribute。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。