Javascript 在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);

---

矩形正确显示，但不在我将鼠标移过的矩形上。此外，我想更改矩形的alpha，以显示下面的内容，并通过基线矩形截取的点击。

我通过更改光标来处理问题。

设置不透明度以更改alpha。至于定位，请创建一个不透明的工作，谢谢。例如，我不是SVG专家，今天我是第一次使用SVG。客户给了我一个SVG文件，我需要处理它，这不是我的产品。如果您给我您的电子邮件地址，我可能会将其发送给您，因为信息是保留的，我无法公开共享。