SVG 阴影切断

Question

我正在使用的 SVG 有一个阴影来自 feGaussianBlur过滤器。

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

像这样:

有问题的 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) 中一致发生。

我可以看出这不是 View 框限制，因为它设置为 600x700。

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

如果是这样的话:

1. 为什么阴影只被垂直切掉而没有水平切掉？
2. 如何解决它，使其不被剪成这样？

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

Answer 1

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

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

工作正常。过滤器区域的静默默认值是:x="-10%"y="-10%"width="120%"height="120%"- 大的模糊通常会被剪掉。 (你的影子没有被水平剪裁，因为你的宽度大约是你高度的 2.5 倍 - 所以 10% 会导致更宽的水平过滤区域)。此外，y 过滤区域似乎是按照路径的像素笔划为零来计算的，因此它忽略了笔划宽度。 (不同的浏览器在是否将笔划视为用于过滤区域计算的边界框的一部分方面具有不同的行为。)

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