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）中，裁剪似乎始终如一。

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

我还可以在devtools检查器中看到＆lt; path＆gt;的边界框。元素，这几乎就像切断阴影的那样：

如果是这样的话：

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

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

Answer 1

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

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

工作得很好。过滤区域的静默默认值为：x =＆＃34; -10％＆＃34; Y =＆＃34; -10％＆＃34;宽度=＆＃34; 120％＆＃34;高度=＆＃34; 120％＆＃34; - 大模糊通常会被剪掉。 （您的阴影不会被水平剪裁，因为您的宽度约为您身高的2.5倍 - 因此10％会导致更宽的水平滤镜区域）。此外，y滤镜区域似乎被计算为好像路径具有零像素笔划，因此它忽略笔划宽度。 （不同的浏览器有不同的行为，他们是否认为笔划是边界框的一部分，用于过滤区域计算。）

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

Answer 2

如上面的评论中所述，我的修复是向filterUnits="userSpaceOnUse" shadow svg标记添加属性。

<filter id="dropshadow" height="130%" width="130%" filterUnits="userSpaceOnUse">

最终输出：

public class MyViewModel {
     //my other properties         

      [ValidateCreateDate(ErrorMessage = "Date must be after or on today's date.")]
      public DateTime? RequestedDate { get; set; }
}

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

Answer 3

如果您在HTML中使用它，您只需使用CSS属性来解决此问题。

svg {
  overflow: visible !important;
}

我没有检查过其他浏览器，但默认情况下，chrome在svg标记上有overflow: hidden。

有点晚了，但我希望它有用。