大型高斯模糊滤镜，不显示SVG边界

Question

我正在尝试在大型背景图像上创建一种“聚光灯”效果，以便用户可以使用光标查看图像的一部分。

我目前正在对位于光标处的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};
}

当前（我希望具有更大的模糊，而不仅仅是增加椭圆半径）

具有可见边界的模糊值增加

非常感谢！

Answer 1

您需要增加Filter Region。

默认情况下为<filter x="-10%" y="-10%" width="120%" height="120%">。但是，如果要使用较大的模糊，则需要增加它，以适应模糊进一步分散像素的方式。

例如<filter id="filter" x="-75%" y="-75%" width="250%" Height="250%">这样的示例适用于您的示例。

https://codepen.io/PaulLeBeau/pen/qGboxR