2014-06-25 14 views
5

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.SVG bulanıklaştırma kenarı eserler

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> 

enter image description here

cevap

9

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.

+0

Çalışmıyor gibi gözüküyor. Bakın: http://jsbin.com/vugojiju/1/edit Sorunu açıklamak için aynı görüntüyü arkaya koyuyorum - bulanık görüntünün saydam kenarları. –

+1

componentTransfer'ı eklemeden önce feGaussianBlur etiketini kapatmanız gerekir. Benim kodumda, kendi kendine kapanan bir kullanıyorum. Sürümünüzde, componenttransfer'ı bir dizi açık ve yakın feGaussian etiketine dahil edersiniz. Yani, componentTransfer –

+0

görmezden geliyor Bir yazım hatası var: ilk satırda, x = "% 0 bir kapanış çift alıntı olmalı. Bunun dışında, harika hack! – montecruiseto