在svg上繪製鼠標懸停的覆蓋矩形

我想通過使用新的矩形突出顯示區域來標記區域。我做在svg上繪製鼠標懸停的覆蓋矩形

function coverRect(el){ 
    var x=el.x.animVal.value; 
    var y=el.y.animVal.value; 
    var width=el.width.animVal.value; 
    var height=el.height.animVal.value; 
    var svg = document.documentElement; 
    var svgNS = svg.namespaceURI; 
    var rect = document.createElementNS(svgNS,'rect'); 
    rect.setAttribute('x',x); 
    rect.setAttribute('y',y); 
    rect.setAttribute('width',width); 
    rect.setAttribute('height',height); 
    rect.setAttribute('fill','yellow'); 
    svg.appendChild(rect); 
} 

var el = document.getElementById('EF-VR1'); 
el.addEventListener('mouseover', function(){ 
    coverRect(el); 
}, false);

rect正確顯示，但不是在我通過鼠標的rect上。此外，我想修改矩形的alpha值，以顯示下面的內容，並通過底層矩形截取的點擊。

來源

2017-07-25 Fabrizio Bartolomucci

設置不透明度以更改alpha。至於定位請創建一個[mcve] –

不透明度確實工作，謝謝。至於這個例子，我不是SVG專家，今天這是我第一次需要處理一個。我被客戶給了一個SVG文件，我需要處理它，這不是我的產品。如果你給我你的電子郵件地址，我可能會發送給你，因爲信息是保留的，我不能公開分享。 –

我通過更改光標來管理該問題。

來源

2017-08-03 15:59:30

在svg上繪製鼠標懸停的覆蓋矩形

回答

相關問題