Rysowanie okręgu z cieniowaniem w klipach SVG krawędziami

Question

Próbuję narysować prosty okrąg z cieniem w SVG, ale z jakiegoś powodu górna i lewa krawędź są obcięte. Zdarza się to zarówno w Chrome, jak i Safari.

Używam kod znalazłem w w3schools samouczek SVG Drop Shadows, zmodyfikowane do wykorzystania zamiast okrąg.

<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> 

Próbowałem przesuwać kółko, zwiększając rozmiar pojemnika SVG itp., Ale otrzymałem taki sam wynik. Próbowałem też przeglądać różne samouczki programu dropshadow i zawsze modyfikując przykładowy kod, aby użyć kółka. Ten sam wynik za każdym razem.

W jaki sposób mogę narysować prosty okrąg z cieniem w SVG?

Answer 1

Okazuje się, że problem leży w przesunięciu filtra. Krąg nie ma dostatecznej obicia wokół niego, aby pomieścić nowo dodany filtr. Do tego dodać należy użyć następujących atrybutów (wyregulować w razie potrzeby):

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

X i Y miejsce skrzynka na filtr w górę iw lewo, część, która jest co brakowało wcześniej. Szerokość i wysokość określają następnie rozmiar pudełka. W tym przypadku 200% jest przesadą, ale może być konieczne w przypadku większych cieni.

Answer 2

Wymień to: <filter id="f1" x="0" y="0" width="200%" height="200%">

do tego: <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">

Patrz przykład: http://jsfiddle.net/sRfck/1/