SVG 阴影被剪裁答案

【问题标题】：SVG dropshadow getting clippedSVG 阴影被剪裁
【发布时间】：2013-07-12 04:41:36
【问题描述】：

我有一个带有正在剪切的阴影的 SVG 刻度图标。我在这里看到的通常的过滤器偏移方法没有帮助。有什么建议吗？

<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="73.516px" height="55.507px" viewBox="0 0 73.516 55.507" xml:space="preserve">

  <filter id="dropShadow" x="-20%" y="-20%" width="200%" height="200%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
    <feOffset dx="0" dy="0" />
    <feMerge>
        <feMergeNode />
        <feMergeNode in="SourceGraphic" />
    </feMerge>
  </filter>

  <polygon fill="#F2F2F2" points="61.769,0 29.784,31.987 11.765,13.96 0,25.69 18.034,43.735 18.011,43.761 29.748,55.507 
    73.516,11.75 " filter="url(#dropShadow)"/>

</svg>

我用 Adobe Illustrator 生成了这个，然后通过代码添加了阴影。

谢谢！

【问题讨论】：

标签： svg clipping svg-filters

【解决方案1】：

将 SVG 的 CSS 设置为 overflow:visible 对我有用。

【讨论】：

【解决方案2】：

扩展过滤器区域无助于在 SVG 视图框之外进行绘制。现在，您的复选标记绘制到视图框的边缘，因此投影被视图框而不是过滤器区域截断。增加你的viewbox的大小，世界会很好。

【讨论】：