Artefakty krawędzi artefaktów z rozmyciem SVG

Question

Kiedy stosuję filtr rozmycia do obrazu svg, rozmywa on krawędzie, przez co stają się one mało przezroczyste (patrz lewa próbka). To, czego chcę, to rozmycie bez takiego artefaktu (patrz prawidłowa próbka). Rozwiązałem to przez hack: wystarczy skopiować ten sam obraz i umieścić go na 4 stronach.

Czy istnieje lepszy sposób?

Pamiętaj, że nie mogę powiększyć obrazu tylko o 5-10%; rozmiar powinien być taki sam, jak oryginalny obraz.

Oto moja SVG:

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

Answer 1

To dobry hack posiadające granicę ostry, który używa feComponentTransfer zwiększyć krycie krawędzi do 1,0, ale również wymaga przyciśnij filtr do rozmiaru przefiltrowanego elementu (używając atrybutów rozmiaru filtra w elemencie filtrującym) - jeśli tego nie zrobisz, zobaczysz nadmiar nowego nieprzezroczystego rozmycia, które wyleje się poza oryginalne zdjęcie.

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

Jeśli nie masz wejście kwadratowy (powiedzmy fotografia jest okrągły), to trzeba użyć feComposite „w” klip wyjście do strefy wejścia zamiast używania wymiary filtrów . Ale feComposites są teraz nieco powolne i nie mogą być jeszcze wykorzystywane jako część filtra CSS, więc powyższa metoda jest preferowana dla kwadratowych danych wejściowych.

Należy zauważyć, że nie będzie to działać na obrazach ze zmiennym kanałem krycia/alfa - skonwertuje wszystko na 100% krycia.