SVG bulanıklaştırma kenarı eserler

Question

Görüntü svg görüntüsüne bulanıklık filtresi uygularken kenarları bulanıklaştırır, böylece saydam olmazlar (bkz. Sol örnek). İstediğim şey, bu tür bir artefakt olmadan onu bulanıklaştırmaktır (bkz. Doğru örnek). Bunu hack ile çözdüm: Sadece aynı çevrilmiş resmi kopyalayıp 4 tarafa yerleştirdim.

Daha iyi bir yolu var mı?

Görüntüyü% 5-10 oranında büyütemediğimi unutmayın; boyut orijinal görüntüyle aynı olmalıdır. İşte

benim svg geçerli:

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

Answer 1

Bu 1,0'a kenarları opaklığını artırmak için feComponentTransfer kullanan bir gevrek sınırını sahibi olmak için iyi bir kesmek, ama aynı zamanda gerektirir Filtreyi filtrelenmiş öğenin boyutuna (filtre öğesinde filtre boyutlandırma özniteliklerini kullanarak) kırpın - bunu yapmazsanız, orijinal görüntünün dışında yeni opak bulanıklıkta kalan & siyah arka plan taşması görürsünüz.

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

bir kare girişi yoksa, o zaman yerine filtre boyutları kullanarak daha girdi alanına çıkışını klibi için "bölümünde" feComposite kullanmak gerekir (en fotoğraf dairesel olduğunu varsayalım) . Fakat feComposites şu anda biraz yavaştır ve henüz bir CSS filtresinin parçası olarak kullanılamaz, bu nedenle yukarıdaki yöntem kare girişler için tercih edilir.

Bu durumun değişken opaklık/alfa kanalı olan resimlerde çalışmayacağını unutmayın - her şeyi% 100 opaklığa dönüştürecektir.