对鼠标悬停在图像上的部分进行模糊处理 + 滚动手柄

Question

我需要修改这个解决方案https://stackoverflow.com/a/35101701/5908612

如果我们有巨大的高度图像（并且我们尝试将图像滚动到底部），则模糊效果在底部页面上不起作用。我应该改变什么，当用户将图像滚动到底部时，这种效果（非模糊点）会起作用吗？

当图像滚动时，我认为我需要重绘蒙版或取消模糊点 p.s. Stackoverflow 正在将图像大小调整为小尺寸...

var svgNS = "http://www.w3.org/2000/svg";

$('.pic').mousemove(function (event) {
    event.preventDefault();
    var upX = event.clientX;
    var upY = event.clientY;
    var mask = $('#mask1')[0];
    
    var circle = document.createElementNS(svgNS,"circle");
    circle.setAttribute("cx", upX);
    circle.setAttribute("cy", upY);
    circle.setAttribute("r", "30");
    circle.setAttribute("fill", "white");
    circle.setAttribute("filter", "url(#filter2)");
    
    mask.appendChild(circle);
    
    setTimeout(function(){ 
        circle.style.opacity = '0';
        setTimeout(function(){ 
            mask.removeChild(circle);
        }, 300);
    }, 300);
});

.pic {
    text-align: center;
    position: relative;
    height: 250px;
}
.blur {
    height: 100%;
}
.overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
}
circle {
   opacity: 1;
   -webkit-transition: opacity 200ms linear;
   transition: opacity 200ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pic">
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" >
        <image filter="url(#filter2)" xlink:href="http://i.imgur.com/2SrFn0Q.jpg" width="528px" height="1042px"></image>
        <filter id="filter2">
            <feGaussianBlur stdDeviation="5" />
        </filter>
        <mask id="mask1">
            <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
        </mask>
        <image xlink:href="http://i.imgur.com/2SrFn0Q.jpg" width="528px" height="1042px" mask="url(#mask1)"></image>
    </svg>
</div>

Answer 1

   var relativePosition = {
            left: event.pageX - $(document).scrollLeft() - $('.pic').offset().left,
            top : event.pageY - $(document).scrollTop() - $('.pic').offset().top
          };

这项工作:)