Apply SVG mask on hover

Question

I am trying to apply a svg mask when the cursor enters a svg circle. The masking is working correctly but the events are not fired.

How can I properly set event listeners to svg elements so that when the circle contained in <svg id="container"> is hovered, mask is applied to <rect id="masked"> ?

 const svg = document.getElementById('container') svg.addEventListener('onmouseover', (e) => { console.log('hover') const masked = document.getElementById('masked') masked.setAttribute('fill', 'grey') masked.setAttribute('fill-opacity', '70%') masked.setAttribute('mask', 'url(#myMask)') }) svg.addEventListener('onmouseleave', (e) => { console.log('leave') const masked = document.getElementById('masked') masked.setAttribute('fill', 'none') masked.setAttribute('fill-opacity', '100%') masked.removeAttribute('mask') })

 html, body { margin: 0; width: 100%; height: 100%; background-color: yellow; } svg, circle { pointer-events: all; }

 <svg id="mySVG" width="600" height="250"> <mask id="myMask" x="0" y="0" width="600" height="250"> <rect width="400" height="250" fill="white" /> <circle cx="25" cy="25" r="25" fill="black" /> </mask> <rect id="masked" x="0" y="0" width="600" height="250" fill="grey"></rect> <!-- The following svg element is supposed to trigger events --> <svg id="container"> <!-- This circle overlaps the circle in <mask> --> <circle cx="25" cy="25" r="25" fill="none" stroke="black" /> </svg> </svg>

Answer 1

The events are called mouseover and mouseleave , not onmouseover and onmouseleave .

 const svg = document.getElementById('container') svg.addEventListener('mouseover', (e) => { console.log('hover') const masked = document.getElementById('masked') masked.setAttribute('fill', 'grey') masked.setAttribute('fill-opacity', '70%') masked.setAttribute('mask', 'url(#myMask)') }) svg.addEventListener('mouseleave', (e) => { console.log('leave') const masked = document.getElementById('masked') masked.setAttribute('fill', 'none') masked.setAttribute('fill-opacity', '100%') masked.removeAttribute('mask') })

 html, body { margin: 0; width: 100%; height: 100%; background-color: yellow; } svg, circle { pointer-events: all; }

 <svg id="mySVG" width="600" height="250"> <mask id="myMask" x="0" y="0" width="600" height="250"> <rect width="400" height="250" fill="white" /> <circle cx="25" cy="25" r="25" fill="black" /> </mask> <rect id="masked" x="0" y="0" width="600" height="250" fill="grey"></rect> <!-- The following svg element is supposed to trigger events --> <svg id="container"> <!-- This circle overlaps the circle in <mask> --> <circle cx="25" cy="25" r="25" fill="none" stroke="black" /> </svg> </svg>