Question

我正在使用同一图像的2种变体（灰度和彩色），并且在mousemove事件中尝试使用SVG遮罩显示彩色图像。

问题：目前，我正在circle标签内添加mask标签，这正在增加DOM元素。

document.querySelector('.maskitem').addEventListener('mousemove', function(event) {
  event.preventDefault();
  var upX = event.clientX;
  var upY = event.clientY;
  var mask = document.querySelector('#mask1');
  mask.innerHTML += `<circle cx='${upX}px' cy='${upY}px' r="70" fill="white" filter="url(#filter2)"/>`
});


document.querySelector('.maskitem').addEventListener('mouseout', function(event) {
  event.preventDefault();
  var mask = document.querySelector('#mask1');
  mask.innerHTML = "";
  mask.setAttribute("r", "0");
});

* {
  margin: 0;
  padding: 0
}

svg {
  height: 668px;
}

<div class="maskitem">
  <svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
     <image filter="url(#filter2)" xlink:href="https://i.ibb.co/Jq8k66k/test.jpg" height="668"></image>
     <filter id="filter2">
       <feGaussianBlur stdDeviation="4" />
     </filter>
     <mask id="mask1">
     </mask>
     <image xlink:href="https://images.unsplash.com/photo-1578704311488-bce5feb2780b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80" height="668" mask="url(#mask1)"></image>
   </svg>
</div>

有人可以建议我在不动态添加大量DOM元素的情况下采取更好的方法吗？

使用SVG遮罩显示背景图像

0 个答案: