SVG 阴影切断

我正在处理的 SVG 通过 feGaussianBlur滤波器有一个下拉阴影。

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

像这样:

image of cutoff shadow

有问题的圣文森特和格林纳丁斯政府是:

<?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>元素的边界框，这几乎就是切断阴影的东西:

path bounding box

如果是这样的话:

  1. 为什么阴影只是垂直切断而不是水平切断？
  2. 怎样才能避免这种情况呢？

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

19284 次浏览
小开
最佳答案

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

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

没问题。过滤器区域的默认值是: x = “-10%”y = “-10%”width = “120%”height = “120%”-大的模糊通常会被剪切。(你的阴影没有被水平裁剪，因为你的宽度大约是你的高度的2.5倍-所以10% 的结果是一个更宽的水平过滤区域)。此外，y 过滤器区域的计算似乎好像路径有一个零像素的笔画，所以它忽略了笔画宽度。(不同的浏览器有不同的行为，无论他们认为笔画是边界框的一部分，为了过滤区域计算的目的。)

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

小开

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

svg {
overflow: visible !important;
}

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

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

小开

向 filter shadow svg 标记添加一个属性:

filterUnits="userSpaceOnUse"

最终输出:

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

这使得阴影绝对定位和可见的外部容器。


提交答案