Bóng SVG bị cắt

Question

SVG tôi đang làm việc có bóng đổ qua bộ lọc feGaussianBlur.

Bản thân bóng được hiển thị chính xác nhưng bị cắt ở các cạnh trên cùng và dưới cùng.

Giống như vậy:

Các SVG trong câu hỏi là:

<?xml version="1.0" standalone="no" ?> 
<!DOCTYPE svg 
    PUBLIC '-//W3C//DTD SVG 1.1//EN' 
    'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'> 
<svg height="600" version="1.1" width="700" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <defs/> 
    <filter id="SVGID_0"> 
    <feGaussianBlur in="SourceGraphic" stdDeviation="6.6"/> 
    <feOffset dx="0" dy="0"/> 
    <feMerge> 
     <feMergeNode/> 
     <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
    </filter> 
    <path d="M 0 83 Q 0 83 0 83 Q 0 83 6 79.5 Q 12 76 17 71 Q 22 66 30.5 57.5 Q 39 49 54 36 Q 69 23 82.5 16.5 Q 96 10 120 4.5 Q 144 -1 170.5 0 Q 197 1 218 16.5 Q 239 32 253.5 51 Q 268 70 278 83.5 Q 288 97 299 110 Q 310 123 320 129.5 Q 330 136 338 136.5 Q 346 137 355 129.5 L 364 122" stroke-linecap="round" style="stroke: #005e7a; stroke-width: 30; fill: none; filter: url(#SVGID_0);" transform="translate(50 50)" /> 
</svg> 

Các cắt xén dường như xảy ra một cách nhất quán trong Chrome (30), Firefox (25), và Opera (12).

Tôi có thể thấy rằng nó không phải là giới hạn hộp xem vì nó được đặt thành 600x700.

Tôi cũng có thể nhìn thấy trong DevTools thanh tra khung giới hạn của < path> yếu tố, và nó gần như là nếu đó là những gì cắt bóng:

Nếu đó là trường hợp:

1. Tại sao bóng chỉ cắt theo chiều dọc và không theo chiều ngang?
2. Làm thế nào để làm việc xung quanh nó, để nó không bị cắt bớt như thế này?

Nếu đó không phải là hộp giới hạn, điều gì gây ra điều này và cách tránh việc cắt bớt này?

Answer 1

Bạn cần tăng kích thước vùng bộ lọc.

<filter id="SVGID_0" y="-40%" height="180%"> 

chỉ hoạt động tốt. Mặc định im lặng cho vùng bộ lọc là: x = "- 10%" y = "- 10%" width = "120%" height = "120%" - làm mờ lớn thường bị cắt bớt. (Bóng của bạn không bị cắt bớt theo chiều ngang bởi vì chiều rộng của bạn là khoảng 2,5x chiều cao của bạn - sao cho 10% kết quả trong một vùng lọc ngang rộng hơn). Ngoài ra, vùng bộ lọc y dường như được tính toán như thể đường dẫn có đột quỵ pixel bằng 0, do đó, nó bỏ qua chiều rộng nét vẽ. (Các trình duyệt khác nhau có khác nhau WRT hành vi cho dù họ xem xét các cơn đột quỵ là một phần của khung giới hạn cho mục đích tính toán khu vực bộ lọc.)

(Cập nhật: Di chuyển lên quan sát từ comments) Xin lưu ý rằng nếu hình dạng cụ thể của bạn là có chiều rộng bằng không hoặc chiều cao bằng không (ví dụ: đường ngang hoặc dọc), thì bạn phải chỉ định filterUnits="userSpaceOnUse" như một phần của khai báo bộ lọc và chỉ định rõ ràng vùng bộ lọc (x, y, chiều cao chiều rộng) trong userSpaceUnits (thường là pixel) tạo đủ chỗ để hiển thị bóng.

Answer 2

Nếu bạn đang sử dụng nó bên trong HTML, bạn có thể chỉ cần sử dụng thuộc tính CSS để khắc phục vấn đề này.

svg { 
    overflow: visible !important; 
} 

Tôi chưa chọn các trình duyệt khác, nhưng chrome có mặc định là overflow: hidden trên thẻ svg.

Hơi muộn một chút, nhưng tôi hy vọng nó hữu ích.

Answer 3

Như đã nêu trong nhận xét ở trên, bản sửa lỗi cho tôi là thêm thuộc tính vào thẻ svg bóng filter.

filterUnits="userSpaceOnUse" 

Output cuối cùng:

<filter id="dropshadow" height="130%" width="130%" filterUnits="userSpaceOnUse"> 

Mà làm cái bóng absolutly vị trí và bên ngoài có thể nhìn thấy của vật chứa nó.