在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值,以显示下面的内容,并通过底层矩形截取的点击。
答
我通过更改光标来管理该问题。
设置不透明度以更改alpha。至于定位请创建一个[mcve] –
不透明度确实工作,谢谢。至于这个例子,我不是SVG专家,今天这是我第一次需要处理一个。我被客户给了一个SVG文件,我需要处理它,这不是我的产品。如果你给我你的电子邮件地址,我可能会发送给你,因为信息是保留的,我不能公开分享。 –