用SVG中的阴影画圆圈剪辑边缘

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

enter image description here

我使用的代码，我在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容器的大小等，但得到了相同的结果。我也尝试谷歌搜索各种阴影教程，并始终修改示例代码使用一个圆圈。每次都有同样的结果。

那么，如何在SVG中使用阴影画一个简单的圆？

来源

2012-09-25 Yony

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

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

x和y的地方箱过滤器并向左一些，这是先前失踪。宽度和高度然后指定框的大小。在这种情况下，200％是矫枉过正，但对于较大的阴影可能是必要的。

来源

2012-09-26 00:26:27 Yony

替换此： <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/

来源

2012-09-26 00:31:43

用SVG中的阴影画圆圈剪辑边缘

回答

相关问题