svgのマウスオーバーでカバーする矩形を描く

Question

新しい矩形でハイライトすることで、アクティブな領域をマークしたいと思います。私は

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のアルファを変更したいと思います。

Answer 1

カーソルを変更して問題を管理しました。