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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。