72

feGaussianBlur我正在使用的 SVG 通过过滤器有一个投影。

阴影本身显示正确，但在顶部和底部边缘被截断。

像这样：

截止阴影的图像

有问题的 SVG 是：

<?xml version="1.0" standalone="no" ?>
<!DOCTYPE svg
  PUBLIC '-//W3C//DTD SVG 1.1//EN'
  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg height="600" version="1.1" width="700" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs/>
  <filter id="SVGID_0">
    <feGaussianBlur in="SourceGraphic" stdDeviation="6.6"/>
    <feOffset dx="0" dy="0"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
  <path d="M 0 83 Q 0 83 0 83 Q 0 83 6 79.5 Q 12 76 17 71 Q 22 66 30.5 57.5 Q 39 49 54 36 Q 69 23 82.5 16.5 Q 96 10 120 4.5 Q 144 -1 170.5 0 Q 197 1 218 16.5 Q 239 32 253.5 51 Q 268 70 278 83.5 Q 288 97 299 110 Q 310 123 320 129.5 Q 330 136 338 136.5 Q 346 137 355 129.5 L 364 122" stroke-linecap="round" style="stroke: #005e7a; stroke-width: 30; fill: none; filter: url(#SVGID_0);" transform="translate(50 50)" />
</svg>

裁剪似乎在 Chrome (30)、Firefox (25) 和 Opera (12) 中始终如一地发生。

我可以看到它不是视框限制，因为它设置为 600x700。

我还可以在 devtools 检查器中看到<path>元素的边界框，就好像这就是切断阴影的原因：

路径边界框

如果是这样的话：

  1. 为什么阴影只垂直切断而不是水平切断？
  2. 如何解决它，以免它像这样被剪裁？

如果不是边界框，是什么原因造成的以及如何避免这种剪裁？

4

3 回答 3

117

您需要增加过滤区域的大小。

<filter id="SVGID_0" y="-40%" height="180%">

工作得很好。过滤器区域的默认默认设置是：x="-10%" y="-10%" width="120%" height="120%" - 大的模糊通常会被剪掉。（你的阴影没有被水平裁剪，因为你的宽度大约是你的高度的 2.5 倍——所以 10% 会导致更宽的水平过滤区域）。此外，y 过滤器区域的计算似乎好像路径的像素笔划为零，因此它忽略了笔划宽度。（不同的浏览器有不同的行为，无论他们是否将笔画视为边界框的一部分以用于过滤器区域计算。）

（更新：从评论中向上移动观察） 请注意，如果您的特定形状是零宽度或零高度（例如水平或垂直线），那么您必须指定filterUnits="userSpaceOnUse"作为过滤器声明的一部分并明确指定过滤器区域（x ,y,width 高度）在 userSpaceUnits（通常是像素）中创建足够的空间来显示阴影。

于 2013-07-26T21:12:19.110 回答
24

filter为shadow svg 标签添加一个属性：

filterUnits="userSpaceOnUse"

最终输出：

<filter id="dropshadow" filterUnits="userSpaceOnUse" height="800" width="1600">

这使得阴影在其容器之外绝对定位和可见。

于 2016-11-01T14:53:21.650 回答
11

如果你在 HTML 中使用它，你可以简单地使用 CSS 属性来解决这个问题。

svg {
  overflow: visible !important;
}

我没有检查过其他浏览器，但 chromeoverflow: hidden默认在 svg 标签上有。

有点晚了，但我希望它会有所帮助。

于 2016-09-07T18:56:35.467 回答