在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上绘制鼠标悬停的覆盖矩形

回答

相关问题