Vẽ một vòng tròn có hình giọt trong các clip SVG các cạnh

Question

Tôi đang cố gắng vẽ một vòng tròn đơn giản với bóng đổ trong SVG, nhưng vì một số lý do các cạnh trên và cạnh trái bị cắt bớt. Điều này xảy ra cả trong Chrome và Safari.

Tôi đang sử dụng mã tôi tìm thấy trong w3schools Tutorial SVG Drop Shadows, sửa đổi để sử dụng một vòng tròn để thay thế.

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

Tôi đã thử di chuyển vòng tròn xung quanh, tăng kích thước của vùng chứa SVG, v.v. nhưng có cùng kết quả. Tôi cũng đã thử Googling hướng dẫn dropshadow khác nhau và luôn luôn sửa đổi mã ví dụ để sử dụng một vòng tròn. Cùng một kết quả mỗi lần.

Vậy làm thế nào để vẽ một vòng tròn đơn giản với một giọt trong SVG?

Answer 1

Tắt vấn đề nằm ở độ lệch của bộ lọc. Vòng tròn không có đủ đệm xung quanh nó để chứa bộ lọc mới được thêm vào. Để thêm này, sử dụng các thuộc tính sau (điều chỉnh khi cần thiết):

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

x và y nơi hộp cho bộ lọc lên và sang trái một số người, đó là những gì đã mất tích trước đó. Chiều rộng và chiều cao sau đó chỉ định kích thước hộp. Trong trường hợp này, 200% là quá mức cần thiết, nhưng nó có thể cần thiết cho các bóng lớn hơn.

Answer 2

Thay thế này: <filter id="f1" x="0" y="0" width="200%" height="200%">

Để này: <filter id="f1" x="-40%" y="-40%" height="200%" width="200%">

Xem ví dụ: http://jsfiddle.net/sRfck/1/