SVG阴影切断

我正在使用的SVG通过

feGaussianBlur

filter有一个阴影

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

像这样：

所讨论的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）中，裁剪似乎一直在发生

我可以看出，它不是一个viewbox限制，因为它被设置为600x700

我还可以在devtools inspector中看到

元素的边界框，几乎就好像这就是切断阴影的原因：

如果是这样的话：

为什么阴影只在垂直方向被切断，而不是在水平方向被切断

如何处理它，使它不会像这样剪裁

---

如果不是边界框，那么是什么导致了这种情况，以及如何避免这种剪裁？

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

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

很好用。过滤器区域的静默默认值为：x=“-10%”y=“-10%”width=“120%”height=“120%”-通常会剪裁较大的模糊。（由于阴影的宽度约为高度的2.5倍，因此不会水平剪裁阴影，因此10%的阴影会产生更宽的水平过滤区域）。此外，y过滤器区域的计算似乎与路径的笔划为零像素一样，因此忽略笔划宽度。（不同的浏览器有不同的行为WRT，他们是否认为笔划是边界框的一部分，目的是过滤区域的计算。）< /P> （更新：从评论中向上移动观察结果）

---

请注意，如果您的特定形状是零宽度或零高度（例如水平线或垂直线），则必须指定

filternits=“userSpaceOnUse”

作为过滤器声明的一部分，并以userSpaceUnits（通常为像素）明确指定过滤器区域（x，y，宽度-高度）这就为显示阴影创造了足够的空间。

如果在HTML中使用它，只需使用CSS属性即可解决此问题

svg {
  overflow: visible !important;
}

我没有检查其他浏览器，但是chrome默认在svg标签上有

溢出：隐藏

有点晚了，但我希望这会有所帮助。
为
过滤器添加一个属性
阴影svg标记：

filterUnits="userSpaceOnUse"

最终输出：

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



这使得阴影在其容器外绝对定位和可见。
啊，非常有趣。我不知道过滤器的区域，但现在可以在规范中看到。如果你事先不知道你的阴影会有多大，你会如何设置过滤器的y属性和高度属性？你是否需要在运行中设置它，或者说“我希望我的阴影永远不会被切断，不管它有多大？”你可以创建一个非常大的默认阴影区域，但这也会占用内存。非常大的阴影也是非常高性能的，因此最好避免它们。您可以使用
filterUnits=“userSpaceOnUse”
将阴影区域设置为viewBox的大小，这基本上会将其绝对定位（在SVG的画布上）。然后，您可以指定像素位置和大小
Nilloc-您希望使这些x和y为负数，以便它们不会剪裁模糊的左边缘和上边缘。filterUnits更改单位系统，但不更改坐标的0,0，该坐标始终位于边界框的左上角（尽管光源的处理方式不同）；有没有一个很好的理由不应用这个属性？Thx，我认为它很有用。我投了反对票。有时SVG viewBox会切断阴影，但本问题并非如此。使用OP的代码尝试您的解决方案-它不起作用。而且，«！重要的»声明通常不受欢迎（有理由）。虽然这个子句存在有很好的理由，但它几乎从未用于它。“我不得不使用它，因为我无法访问原始代码”也不是一个好理由@我想您可以将SVG包装在一个div中，使该div的高度大于SVG，以便在底部有额外的空间。然后使svg的溢出可见，而div的溢出不可见。我还没有检查解决方案，但我认为这会带来好运，杰克！