Я пытаюсь создать эффект «прожектора» на большом фоновом изображении, где пользователь может использовать курсор для просмотра частей изображения.
В настоящее время я применяю размытие по Гауссу filter к элементу mask, который расположен у курсора и показывает части большого image.
Мне бы хотелось иметь более высокую степень размытия, чтобы получить более мягкий край, но когда я увеличиваю значение атрибута stdDeviation внутри фильтра, граница SVG раскрывается - я прикрепил два изображения к проиллюстрируйте, также вы можете увидеть это в этой ручке https://codepen.io/moevbiz/pen/YbwErx
Вот мой код:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<filter id="filter">
<feGaussianBlur stdDeviation="50"/>
</filter>
<mask id="mask">
<ellipse id="ellipse" cx="50%" cy="50%" rx="100" ry="100" fill="white" filter="url(#filter)"></ellipse>
</mask>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" width="100%" height="100%" mask="url(#mask)"></image>
</svg>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" />
body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow:hidden;
}
img {
width: 100vw;
height: 100vh;
mask: url(#mask);
}
document.onmousemove=function(e) {
var mousecoords = getMousePos(e);
var mouseX = mousecoords.x;
var mouseY = mousecoords.y;
var ellipse = document.getElementById('ellipse');
ellipse.setAttribute('cx', mouseX);
ellipse.setAttribute('cy', mouseY)
};
function getMousePos(e) {
return {x:e.clientX,y:e.clientY};
}
ток (я хочу, чтобы размытие было , а не просто увеличивать радиус эллипса)
увеличенное значение размытия с видимыми границами
благодарен за любые подсказки!