2016-04-28 6 views
0

私は、フィルタを介して追加された画像を持つパスを持っています。 はまた、パスは次のように設定した背景色があります。画像フィルタはあるが透明な背景を持つSVGパス

myPath.css('fill', bgColour);

を私の質問は、透明のパスを持っていますが、目に見える画像を維持することができる方法ですか?

私はfill: transparentfill-opacity: 0fill: rgba(0, 0, 0, 1)を試しましたが、これらの画像も見えなくなります。ここで

は私の現在のコードです:

var filter = svg.filter(defs, 'myFilter', 0, 0, '100%', '100%', filterOptions); 

var sourcePathRef = 'SourceGraphic'; 
if (hasTransparentBackground()) { 
    // make path transparent 
    svg.filters.colorMatrix(filter, 'TransformedGraphic', sourcePathRef, 'matrix', [ 
     [0, 0, 0, 0, 0], 
     [0, 0, 0, 0, 0], 
     [0, 0, 0, 0, 0], 
     [0, 0, 0, 0, 0] 
    ]); 
    sourcePathRef = 'TransformedGraphic'; 
} 

// add the image 
var outputSlot = 'customImage'; 
svg.filters.image(filter, outputSlot, imageFile, { 
    preserveAspectRatio: aspectRatio 
}); 
// move it 
svg.filters.offset(filter, 'movedImage', outputSlot, moveX, moveY); 
// combine image with path for clipping 
svg.filters.composite(filter, 'clip', 'in', 'movedImage', sourcePathRef); 
// mix both images 
svg.filters.blend(filter, '', 'normal', 'clip', sourcePathRef); 
// apply the filter 
imageSlot.attr('filter', 'url(#myFilter)'); 
+0

:-)フィルタリング最後(ブレンド)をスキップ? –

+0

イメージがパスよりも小さい場合は、パスの残りの領域を色で塗りつぶすのではなく、SVGファイルの背後にあるもの(たとえば背景イメージ)を表示します。 – Guite

+0

イメージを直接イメージとして描画し、それをパスにクリップするのはなぜですか? –

答えて

0

簡単な修正:パスは透明ではなく、画像表示することが何を意味する

関連する問題