svg路徑邊框上的鼠標事件

我對mouseover，mouseout，點擊svg路徑邊界框上的事件感興趣。例如，鑑於此代碼：svg路徑邊框上的鼠標事件

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
<svg width="100%" height="100%" version="1.1" 
xmlns="http://www.w3.org/2000/svg"> 

<circle id="circle" cx="100" cy="50" r="40" stroke="black" 
stroke-width="2" /> 
</svg> 
<script> 
    document.ready = (function() 
    { 
     var circle = document.getElementById('circle'); 
     circle.setAttributeNS(null, 'fill', 'rgb(255,255,0)'); 
     circle.onmouseover = function (e) 
     { 
      e.target.setAttributeNS(null, 'fill', 'rgb(255,0,0)'); 
     }; 
     circle.onmouseout = function (e) 
     { 
      e.target.setAttributeNS(null, 'fill', 'rgb(255,255,0)'); 
     }; 
    })(); 
</script> 
</body> 
</html>

圈變化填充顏色，當你的鼠標和退出的話，而我想它，如果你的鼠標進出其邊界框改變顏色。我已經在下面嘗試過了，但它不起作用：

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
<svg width="100%" height="100%" version="1.1" 
xmlns="http://www.w3.org/2000/svg"> 

<circle id="circle" cx="100" cy="50" r="40" stroke="black" 
stroke-width="2" /> 
</svg> 
<script> 
    document.ready = (function() 
    { 
     var circle = document.getElementById('circle'); 
     circle.setAttributeNS(null, 'fill', 'rgb(255,255,0)'); 
     circle.getBBox().onmouseover = function (e) 
     { 
      circle.setAttributeNS(null, 'fill', 'rgb(255,0,0)'); 
     }; 
     circle.getBBox().onmouseout = function (e) 
     { 
      circle.setAttributeNS(null, 'fill', 'rgb(255,255,0)'); 
     }; 
    })(); 
</script> 
</body> 
</html>

我對使用外部庫不感興趣。

來源

2011-05-30 morpheus

您也可以使用pointer-events="boundingBox"（見SVG Tiny 1.2）路徑元素上獲得的外接矩形框，而不是路徑本身上檢測到的鼠標事件。

boundingBox關鍵字在Opera中被支持，但到目前爲止還沒有在其他瀏覽器中被AFAIK支持。爲了使它在任何地方都能正常工作，最常見的解決方案是添加一個不可見的矩形來捕獲事件。

來源

2011-05-31 07:36:02

[在SVG 2草案中，屬性值已更改爲'bounding-box']（http://www.w3.org/TR/SVG2/interact.html#PointerEventsProp），現在Chrome /鉻 – LeartS 2014-08-04 17:00:59

function bbox(e) 
     {  
      if (e && e.getBBox && e.getAttributeNS) 
      { 
       var box = e.getBBox(); 
       var transform = e.getAttributeNS(null, 'transform'); 
       if (box.x && box.y && box.width && box.height && transform) 
       { 
        var rect = document.createElementNS(svgns, 'rect'); 
        rect.setAttributeNS(null, 'x', box.x); 
        rect.setAttributeNS(null, 'y', box.y); 
        rect.setAttributeNS(null, 'width', box.width); 
        rect.setAttributeNS(null, 'height', box.height); 
        rect.setAttributeNS(null, 'fill', 'rgba(0,0,0,0)'); 
        rect.setAttributeNS(null, 'stroke', 'rgba(0,0,0,0)'); 
        rect.setAttributeNS(null, 'transform', transform);    
        e.parentNode.appendChild(rect); 
        return rect; 
       } 
      }  

      return null; 
     };

來源

2011-05-30 20:21:04 morpheus

svg路徑邊框上的鼠標事件

回答

相關問題