用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中的陰影畫圓圈剪輯邊緣

回答

相關問題