Подвижная маска

#css #svg #mask

#container {
  position: relative;
  height: 300px;
  width: 400px;
  border: 1px solid black;
  background: url(https://www.firestock.ru/wp-content/uploads/2019/03/YArkiy-ryizhiy-kot-na-fone-siney-stenyi-Bright-red-cat-on-a-background-of-blue-wall-6072--4000-700x460.jpg)
}
#mask{
  position: absolute;
  border: 1px dashed lightblue;
  height: 300px;
  width: 900px;
  background: #87cefa24;
  left: -300px;
}



  






Имеется контейнер (#container) с фоновым изображением и вложенный, перемещающийся
по оси x контейнер-маска (#mask) (большей ширины, нежели родительский контейнер). Каким
способом я могу реализовать максимально кроссбраузерное решение следующей задачи: динамически
заполнять маску либо полупрозрачным градиентом, либо изображением с альфа-каналом таким
образом (только градиентные переходы прозрачности в разных конфигурациях), чтобы при
перемещении маски сквозь нее «просвечивался» фон в соответствии с альфа-каналом маски?
Соответственно, остальные участки изображения должны быть прозрачными. У меня есть
один вариант, но хотелось бы увидеть другие решения, возможно более лаконичные и простые
    

Ответы

Ответ 1

Вот вариант с svg и маской, отправлено и проверено в ff 66.0.3





let d = [[100,100,70], [300,100,60], [500,100,50]]
         .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", d.x = d3.event.x)
      .attr("cy", d.y = 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 => d.x)
            .attr("cy", d => d.y)
            .attr('r',  d => d.r)
            .attr('fill', 'url(#linear-gradient)');
}