Hiện vật cạnh mờ của bộ lọc mờ SVG

Question

Khi tôi áp dụng bộ lọc mờ cho hình ảnh svg, nó làm mờ các cạnh để chúng trở nên trong suốt (xem mẫu bên trái). Những gì tôi muốn là làm mờ nó mà không có tạo tác như vậy (xem mẫu bên phải). Tôi đã giải quyết vấn đề này bằng cách hack: chỉ cần sao chép cùng một hình ảnh được lật và đặt chúng cho 4 mặt.

Có cách nào tốt hơn không?

Lưu ý rằng tôi không thể chỉ làm cho hình ảnh lớn hơn trên 5-10%; kích thước phải giống như hình ảnh gốc.

Đây là svg của tôi:

... 
<filter id="blur"> 
<feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur> 
</filter> 
... 
<g filter="url(#blur)"> 
    <image xlink:href="cathedral.jpg"></image> 
</g> 

Answer 1

Đây là một hack tốt cho việc có một biên giới rõ nét mà sử dụng feComponentTransfer để tăng độ mờ đục của các cạnh đến 1.0, nhưng nó cũng đòi hỏi bạn phải hãy nén bộ lọc theo kích thước của phần tử đã lọc (sử dụng thuộc tính định cỡ bộ lọc trong phần tử lọc) - nếu bạn không làm điều này, bạn sẽ thấy một luồng tràn mờ mờ mới bắt đầu ở bên ngoài hình ảnh gốc.

<filter id="blur" x="0%" 
y="0%" width="100%" height="100%"> 
<feGaussianBlur in="SourceGraphic" stdDeviation="4"/> 
    <feComponentTransfer> 
     <feFuncA type="discrete" tableValues="1 1"/> 
    </feComponentTransfer> 
</filter> 
... 
<g filter="url(#blur)"> 
    <image xlink:href="cathedral.jpg"></image> 
</g> 

Nếu bạn không có một đầu vào vuông (giả sử ảnh của bạn là hình tròn), sau đó bạn cần phải sử dụng một feComposite "trong" clip đầu ra cho lĩnh vực đầu vào hơn là sử dụng kích thước bộ lọc . Nhưng feComposites có một chút chậm ngay bây giờ và không thể được sử dụng như là một phần của một bộ lọc CSS, do đó, phương pháp trên là thích hợp hơn cho đầu vào vuông.

Lưu ý rằng điều này sẽ không hoạt động trên hình ảnh có kênh opacity/alpha biến - nó sẽ chuyển đổi mọi thứ thành độ mờ đục 100%.