SVG阴影切断 [英] SVG shadow cut off

问题描述

我正在使用的SVG通过feGaussianBlur过滤器具有阴影.

The SVG I'm working with has a drop shadow via feGaussianBlur filter.

阴影本身可以正确显示，但是会在顶部和底部边缘被切掉.

The shadow itself is displayed properly, but gets cut off on top and bottom edges.

像这样:

有问题的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)中持续发生.

The cropping seems to happen consistently in Chrome (30), Firefox (25), and Opera (12).

我看到它不是viewbox的限制，因为它设置为600x700.

I can see that it's not a viewbox limitation, as it's set to 600x700.

我还可以在devtools检查器中看到< path>元素的边界框，几乎就像是在切断阴影:

I can also see in devtools inspector the bounding box of <path> element, and it's almost as if that's what cuts off the shadow:

如果是这样的话:

1. 为什么阴影只能垂直切掉而不能水平切掉?
2. 如何解决它，使其不会像这样被剪掉?

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

If it's not the bounding box, what causes this and how to avoid this clipping?

推荐答案

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

You need to increase the size of the filter region.

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

工作正常.滤镜区域的默认默认值为:x =-10％" y =-10％" width ="120％" height ="120％"-大的模糊通常会被裁剪. (您的阴影不会被水平修剪，因为您的宽度大约是高度的2.5倍-因此10％会导致更宽的水平滤镜区域).同样，y过滤器区域似乎被计算为好像路径具有零像素笔触，因此它忽略了笔划宽度. (出于过滤器区域计算的目的，不同的浏览器是否将笔划视为边界框的一部分，其行为有所不同.)

works just fine. The silent defaults for the filter region are: x="-10%" y="-10%" width="120%" height="120%" - large blurs usually get clipped. (Your shadow isn't getting clipped horizontally because your width is about 2.5x your height - so that 10% results in a wider horizontal filter region). Also, the y filter region seems to be calculated as if the path had a zero pixel stroke, so it's ignoring the stroke width. (Different browsers have different behavior wrt whether they consider the stroke to be part of the bounding box for purposes of filter region calculation.)

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

(Update: Moving up observations from comments) Please note that if your particular shape is either zero width or zero height (e.g. a horizontal or vertical line), then you must specify filterUnits="userSpaceOnUse" as part of the filter declaration and explicitly specify a filter region (x,y,width height) in userSpaceUnits (usually pixels) that creates enough room to display a shadow.

这篇关于SVG阴影切断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！