SVG defs（遮罩）上的鼠标事件

Question

There is svg over background image. SVG is a square with a round hole in the middle (as an example). A background image appears through the circle.

I want to drag this circle by the mouse. But how to get access from javascript to defs inside svg is not clear. I can change properties, but onclick events do not work on them.

Here is my SVG, and I want to access mouse events on element with id = my_mask :

<svg>
  <defs>
    <mask id="hole">
      <rect width="100%" height="100%" fill="#fff"/>
      <g id="my_mask">
        <circle r="50" cx="100" cy="100" fill="#000"/>
      </g>
    </mask>
  </defs>
<rect fill="#00f" width="100%" height="100%" mask="url(#hole)" />
</svg>

Answer 1

On mousemove you reset the cx and cy attributes of the circle. I hope this is what you were asking.

 //on `mousemove` you reset the `cx` and `cy` attributes of the circle svg.addEventListener("mousemove",(e)=>{ let m = oMousePosSVG(e) c.setAttributeNS(null,"cx",mx) c.setAttributeNS(null,"cy",my) }) // a function to get the position of the mouse over the svg canvas function oMousePosSVG(e) { var p = svg.createSVGPoint(); px = e.clientX; py = e.clientY; var ctm = svg.getScreenCTM().inverse(); var p = p.matrixTransform(ctm); return p; } 

 svg{background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg); background-size:cover} 

 <svg id="svg" viewBox="0 0 300 300"> <defs> <mask id="hole"> <rect width="100%" height="100%" fill="#fff"/> <g id="my_mask"> <circle id="c" r="50" cx="100" cy="100" fill="#000"/> </g> </mask> </defs> <rect fill="#00f" width="100%" height="100%" mask="url(#hole)" /> </svg> 

UPDATE

You cannot attach an event to a mask however you can use the circle inside the mask and attach an event to the use as I do in the next example:

In this example I'm using the mousedown event but you van use mouseover instead.

 let m,dx,dy; let dragging = false; theUse.addEventListener("mousedown",(e)=>{ m = oMousePosSVG(e); dx = Number(c.getAttribute("cx")) - mx; dy = Number(c.getAttribute("cy")) - my; dragging = true; }) svg.addEventListener("mouseup",(e)=>{ dragging = false; }) svg.addEventListener("mousemove",(e)=>{ if(dragging){ m = oMousePosSVG(e) c.setAttributeNS(null,"cx",mx + dx) c.setAttributeNS(null,"cy",my + dy) } }) function oMousePosSVG(e) { var p = svg.createSVGPoint(); px = e.clientX; py = e.clientY; var ctm = svg.getScreenCTM().inverse(); var p = p.matrixTransform(ctm); return p; } 

 svg{background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg); background-size:cover} 

 <svg id="svg" viewBox="0 0 300 300"> <defs> <mask id="hole"> <rect width="100%" height="100%" fill="#fff"/> <g id="my_mask"> <circle id="c" r="50" cx="100" cy="100" /> </g> </mask> </defs> <rect fill="#00f" width="100%" height="100%" mask="url(#hole)" /> <use id="theUse" xlink:href="#c" fill="none" pointer-events="all" /> </svg> 

Answer 2

I suggest following variant with help of d3.js but this effect can be achieved without d3 too:

Here is a another transparent circle with drag possibility and position sync with masking circle when dragging, try it live snippet:

 let d = [[100,100,50], [300,100,40], [500,100,30]] .map(d=>({x: d[0], y: d[1], r: d[2]})); let mask = circles('mask').call(upd); circles('g').style('fill','transparent') .style('cursor','pointer') .call(upd) .call(d3.drag().on("drag", function (d) { d3.select(this) .attr("cx", dx = d3.event.x) .attr("cy", dy = d3.event.y); mask.call(upd) })); function circles(selector) { return d3.select(selector) .selectAll('circle') .data(d) .enter() .append('circle') } function upd(selection) { selection.attr("cx", d => dx) .attr("cy", d => dy) .attr('r', d => dr); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script> <svg viewBox="0 0 600 600" style="background: center url(https://i.imgur.com/cdqfoqZ.png)"> <defs> <mask id="hole"> <rect width="100%" height="100%" fill="#fff"/> </mask> </defs> <rect fill="#00f" width="100%" height="100%" mask="url(#hole)" /> <g></g> </svg>