不显示 SVG 边框的大型高斯模糊滤镜答案

【问题标题】：Large gaussian blur filter without revealing SVG border不显示 SVG 边框的大型高斯模糊滤镜
【发布时间】：2019-05-09 23:15:32
【问题描述】：

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

我目前正在对位于光标处的mask 元素应用高斯模糊filter，并显示大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};
}

当前（我想要比这更大的 blur，而不仅仅是增加椭圆半径）

增加可见边框的模糊值

感谢任何提示！

【问题讨论】：

你可以玩弄椭圆元素，rx & ry？
这只会改变圆的半径，模糊半径不受影响=边界仍然可见......
您可以使用从中间的白色到黑色的径向渐变填充椭圆，而不是应用过滤器
很聪明，听起来会奏效！会尝试让你知道~

标签： javascript html svg

【解决方案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

【讨论】：