Zeichnen eines Kreises mit einem Dropshadow in SVG Clips die Kanten

Question

Ich versuche, einen einfachen Kreis mit einem Schlagschatten in SVG zu zeichnen, aber aus irgendeinem Grund sind die oberen und linken Kanten abgeschnitten. Dies geschieht sowohl in Chrome als auch in Safari.

Ich verwende Code, den ich in den w3schools Tutorial SVG Drop Shadows gefunden, modifiziert stattdessen einen Kreis zu verwenden.

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

Ich habe versucht, den Kreis zu bewegen, die Größe des SVG-Containers zu erhöhen, usw., aber das gleiche Ergebnis. Ich habe auch versucht, verschiedene Dropshadow Tutorials zu googeln und immer den Beispielcode zu ändern, um einen Kreis zu verwenden. Das gleiche Ergebnis jedes Mal.

Also, wie zeichne ich einen einfachen Kreis mit einem Dropshadow in SVG?

Answer 1

Stellt sich heraus das Problem liegt im Offset des Filters. Der Kreis hat nicht genug Polsterung, um den neu hinzugefügten Filter aufzunehmen. Um diese Erweiterung, die folgenden Attribute verwenden (nach Bedarf anpassen):

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

Die x- und y-Platz die Box für den Filter und einige links, das ist, was vorher fehlte. Die Breite und Höhe geben dann die Boxgröße an. In diesem Fall sind 200% Overkill, aber für größere Schatten möglicherweise erforderlich.

Answer 2

ersetzen diese: <filter id="f1" x="0" y="0" width="200%" height="200%">

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

Siehe Beispiel: http://jsfiddle.net/sRfck/1/