javascript - SVG defs( mask )上的鼠标事件

Question

背景图像上有 svg。 SVG 是一个正方形，中间有一个圆孔(举个例子)。背景图像出现在圆圈中。

我想用鼠标拖动这个圆圈。但是如何从 javascript 访问 svg 中的 defs 尚不清楚。我可以更改属性，但 onclick 事件对它们不起作用。

这是我的 SVG，我想使用 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

在 mousemove 上，您重置了圆的 cx 和 cy 属性。我希望这就是您要问的。

//on `mousemove` you reset the `cx` and `cy` attributes of the circle
svg.addEventListener("mousemove",(e)=>{
  let m = oMousePosSVG(e)
  c.setAttributeNS(null,"cx",m.x)
  c.setAttributeNS(null,"cy",m.y)
})

// a function to get the position of the mouse over the svg canvas
function oMousePosSVG(e) {
      var p = svg.createSVGPoint();
      p.x = e.clientX;
      p.y = 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>

更新

您不能将事件附加到掩码，但是您可以使用掩码内的圆圈并将事件附加到使用，就像我在下一个示例中所做的那样:

在此示例中，我使用了 mousedown 事件，但您可以改用 mouseover。

let m,dx,dy;
let dragging = false;

theUse.addEventListener("mousedown",(e)=>{
  m = oMousePosSVG(e);
  dx = Number(c.getAttribute("cx")) - m.x;
  dy = Number(c.getAttribute("cy")) - m.y;
  dragging = true;
})

svg.addEventListener("mouseup",(e)=>{
  
  dragging = false;
})


svg.addEventListener("mousemove",(e)=>{
  if(dragging){
  m = oMousePosSVG(e)
  c.setAttributeNS(null,"cx",m.x + dx)
  c.setAttributeNS(null,"cy",m.y + dy)
  }
})


function oMousePosSVG(e) {
      var p = svg.createSVGPoint();
      p.x = e.clientX;
      p.y = 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>