帶圖像過濾器但透明背景的SVG路徑

我有一個通過過濾器添加圖像的路徑。同樣的路徑有一個背景顏色設置是這樣的：帶圖像過濾器但透明背景的SVG路徑

myPath.css('fill', bgColour);

我的問題是它是如何可能有路徑透明的，但保持圖像的可見？

我試過fill: transparent,fill-opacity: 0,fill: 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)');

來源

2016-04-28 Guite

是什麼意思的路徑是透明的，但圖像可見？ –

如果圖像小於路徑，則路徑的其餘區域不應填充顏色，而是顯示SVG文件後面的內容（例如背景圖像）。 – Guite

爲什麼不直接將圖像作爲圖像繪製，然後將其剪切到路徑上？ –

簡單的解決辦法：跳過最後（混合）過濾:-)

來源

2016-05-03 16:24:13 Guite

帶圖像過濾器但透明背景的SVG路徑

回答

相關問題