將背景顏色和圖像過濾器的組合應用到svg路徑

我有一個svg路徑，我同時應用背景顏色以及包含（可能縮放和翻譯）圖像的過濾器。 myPath.css('fill', bgColour);將背景顏色和圖像過濾器的組合應用到svg路徑

此後，將過濾器添加這樣的：：

首先背景顏色使用的CSS填充屬性施加

var filter = svg.filter(defs, 'myImageFilter', 
    0, 0, scale + '%', scale + '%', 
    { 
     filterUnits: 'objectBoundingBox' 
    } 
); 

// add the image 
var outputSlot = 'myImage' + sectionNumber; 
svg.filters.image(filter, outputSlot, pathToImageFile); 
// move it 
svg.filters.offset(filter, 'movedImage', outputSlot, moveX, moveY); 
// combine image with path for clipping 
svg.filters.composite(filter, 'clip', 'in', 'movedImage', 'SourceGraphic'); 
// mix both images 
svg.filters.blend(filter, '', 'multiply', 'SourceGraphic', 'clip'); 

// assign filter to the path 
myPath.attr('filter', 'url(#myImageFilter)');

我有與該問題的背景顏色影響圖像，（就像它被塗在圖像上方一樣）。我需要的是將圖像放置在背景的頂部。

有關如何實現這一點的任何想法？

我可能需要重複整個路徑，讓它只有一次背景顏色和一次圖像？

來源

2016-03-23 Guite

你可以在代碼片段中提供完整的代碼嗎？ –

這可能是svg.filters.blend中的「繁殖」。只需使用「正常」而不是「繁殖」即可。

來源

2016-03-24 03:10:47

謝謝，這確實是解決方案！ – Guite

將背景顏色和圖像過濾器的組合應用到svg路徑

回答

相關問題