Artefogli sfocatura filtro SVG

Question

Quando applico il filtro sfocatura all'immagine svg, sfoca i bordi in modo che diventino poco trasparenti (vedere campione di sinistra). Quello che voglio è sfocarlo senza un artefatto (vedi campione giusto). Ho risolto questo problema con un hack: copiavo la stessa immagine capovolta e li ho posizionati per 4 lati.

C'è un modo migliore?

Nota che non riesco solo a ingrandire l'immagine del 5-10%; la dimensione dovrebbe essere la stessa dell'immagine originale.

Ecco il mio svg:

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

Answer 1

Questo è un buon trucco per avere un bordo croccante che utilizza feComponentTransfer per aumentare l'opacità dei bordi a 1,0, ma richiede anche di aggancia il filtro alla dimensione dell'elemento filtrato (utilizzando gli attributi di ridimensionamento del filtro nell'elemento filtro) - se non lo fai, vedrai un overflow di sfocatura appena opaca dello sfondo nero & che si rovescia all'esterno dell'immagine originale.

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

Se non si dispone di un ingresso di piazza (diciamo la tua foto è circolare), allora avete bisogno di utilizzare un feComposite "in" per agganciare l'uscita per la zona dell'ingresso piuttosto che usare dimensioni del filtro . Ma i fotocompositi sono un po 'lenti in questo momento e non possono ancora essere usati come parte di un filtro CSS, quindi il metodo sopra è preferibile per gli input quadrati.

Nota che questo non funzionerà su immagini con opacità variabile/canale alfa - convertirà tutto in opacità al 100%.