Dibujando un círculo con una sombra de gotas en SVG clips los bordes

Question

Estoy tratando de dibujar un círculo simple con una sombra paralela en SVG, pero por alguna razón los bordes superior e izquierdo se recortan. Esto sucede tanto en Chrome como en Safari.

estoy usando el código que he encontrado en los w3schools tutorial SVG Drop Shadows, modificado para usar un círculo en su lugar.

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

Intenté mover el círculo, aumentar el tamaño del contenedor SVG, etc., pero obtuve el mismo resultado. También traté de buscar en Google varios tutoriales de dropshadow y siempre modifiqué el código de ejemplo para usar un círculo. El mismo resultado cada vez.

Entonces, ¿cómo hago un círculo simple con una sombra de gotas en SVG?

Answer 1

Resulta que el problema radica en el desplazamiento del filtro. El círculo no tiene suficiente espacio alrededor para acomodar el filtro recién agregado. Para agregar, utilice los siguientes atributos (ajuste según sea necesario):

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

El xey lugar la caja para el filtro hacia arriba y hacia la izquierda algunos, que es lo que faltaba antes. El ancho y alto especifican el tamaño de la caja. En este caso, el 200% es exagerado, pero puede ser necesario para sombras más grandes.

Answer 2

Reemplazar esta: <filter id="f1" x="0" y="0" width="200%" height="200%">

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

Ver ejemplo: http://jsfiddle.net/sRfck/1/