SVG или Canvas, как вырезать квадрат по координатам и размеру div

Question

Моя проблема следующая.Как сгенерировать SVG или Canvas, чтобы они выглядели как полноэкранное наложение страниц (прозрачность 50%).Но я хочу выделить некоторые div ниже этого наложения.Я знаю координацию и ширину-высоту этого div.Как вырезать область в соответствии с этим div на моем оверлее, чтобы эта область была полностью прозрачной и ясно видеть этот div?Этот div будет в разных местах на разных страницах.Я не хорош в холсте или SVG.пожалуйста, помогите мне.

Answer 1

Надеюсь, это то, что вам нужно.На DOM у вас есть 2 деления: #square и #circle.

Я использую полупрозрачный (непрозрачность .9) оверлей, который обрезается над #square.Пожалуйста, прочитайте мои комментарии.

var SVG_NS = 'http://www.w3.org/2000/svg';
// define the position of the #square
let _left = 120;
let _top = 230; 
let w = 150;
let h = 150;

// recalculate the points needed for the clip-path
 let p = svg.createSVGPoint();
 p.x = _left;
 p.y = _top;
 let ctm = svg.getScreenCTM().inverse();
 p =  p.matrixTransform(ctm);

 let p1 = svg.createSVGPoint();
 p1.x = w;
 p1.y = h;
 let ctm1 = svg.getScreenCTM().inverse();
 p1 =  p1.matrixTransform(ctm1);


//define the d for the clip path
let oClipRect={
  d:`M0,0L100,0L100,500L0,500L0,0
  M${p.x+p1.x},${p.y}
  L${p.x},${p.y}
  L${p.x},${p.y+p1.y}
  L${p.x+p1.x},${p.y+p1.y}
  L${p.x+p1.x},${p.y}`,
  id:"clip_rect"
}

//a big overlay rectangle that gets clipped
//The rectangle is semitransparent so that you can see the the circle
let oRect={
  width:"100%",
  height:"100%",
  "clip-path":"url(#_clip)",
  fill:"rgba(0,0,0,.9)"
}


drawElmt(oClipRect,"path", _clip);
drawElmt(oRect,"rect", svg);

// function update needed on resize
function update(){
 p = svg.createSVGPoint();
 p.x = _left;
 p.y = _top;
 ctm = svg.getScreenCTM().inverse();
 p =  p.matrixTransform(ctm);

 p1 = svg.createSVGPoint();
 p1.x = w;
 p1.y = h;
 ctm1 = svg.getScreenCTM().inverse();
 p1 =  p1.matrixTransform(ctm1);
 
 d = `M0,0L100,0L100,500L0,500L0,0
  M${p.x+p1.x},${p.y}
  L${p.x},${p.y}
  L${p.x},${p.y+p1.y}
  L${p.x+p1.x},${p.y+p1.y}
  L${p.x+p1.x},${p.y}`;
  console.log(d)

 clip_rect.setAttributeNS(null,"d",d);
 
}



setTimeout(function() {
		update();
		addEventListener('resize', update, false);
}, 15);




function drawElmt(o,el, parent) { 
  var elmt = document.createElementNS(SVG_NS, el);
  for (var name in o) {
    if (o.hasOwnProperty(name)) {
      elmt.setAttributeNS(null, name, o[name]);
    }
  }
  parent.appendChild(elmt);
  return elmt;
}

*{margin:0;padding:0;}
#wrap {
  height: auto;
  position: relative;
}
.test {
  width: 150px;
  height: 150px;
  position: absolute;
}

#square{background: gold;left: 120px;
  top: 230px;}

#circle{background:red;left: 150px;
  top: 270px;border-radius:50%;}

svg {
  border: 1px solid;
  position: absolute;
}

<div id="wrap">
<div id="square" class="test"></div>
<div id="circle" class="test"></div>
<svg id="svg" viewBox="0 0 100 500">
  <clipPath id="_clip">
          
  </clipPath>  
</svg>
</div>