在SVG中绘制带有下拉阴影的圆可裁剪边缘

Question

我试图在SVG中画一个带有阴影的简单圆形，但由于某种原因，顶部和左侧边缘被裁剪了。这在Chrome和Safari中都会发生。

​

​

我正在使用我在w3schools教程SVG Drop Shadows中找到的代码，经过修改后使用了一个圆圈。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <circle r="30" cx="50" cy="50" style="stroke:gray; fill:aliceblue; stroke-width:3px" filter="url(#f1)" />
</svg>

我试着移动圆圈，增加SVG容器的大小，等等，但都得到了同样的结果。我还尝试用谷歌搜索各种dropshadow教程，并总是修改示例代码以使用圆圈。每次的结果都是一样的。

那么，如何在SVG中绘制一个带有dropshadow的简单圆呢？

Answer 1

原来问题出在过滤器的偏移量上。圆圈周围没有足够的填充来容纳新添加的滤镜。要添加此属性，请使用以下属性(根据需要进行调整)：

<filter id="f1" x="-20%" y="-20%" width="200%" height="200%">

X和y将过滤器的框向上放置，并向左放置一些，这是之前缺少的。宽度和高度然后指定框的大小。在这种情况下，200%是过度杀伤力，但对于较大的阴影可能是必要的。

Answer 2

替换为：<filter id="f1" x="0" y="0" width="200%" height="200%">

关于这个：<filter id="f1" x="-40%" y="-40%" height="200%" width="200%">

请参见示例：http://jsfiddle.net/sRfck/1/