背景色と画像フィルタの組み合わせをsvgパスに適用

Question

私はsvgパスを使用しています。背景色と（可能な拡大縮小および変換された）画像を含むフィルタの両方を適用します。

背景色は、CSSを使用して適用される第一の特性を満たす：その後myPath.css('fill', bgColour);

がフィルタをこのように添加される：

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)'); 

私はそれと持っている問題は、背景色が画像に影響を与えるであり、あまりにも（イメージの上に塗られているかのように）。私が必要とするのは、画像が代わりに背景の上に置かれるということです。

どのようにこれを達成するためのアイデアですか？

パス全体を複製して、背景色のみに1回、画像に1回必要なのでしょうか？

Answer 1

おそらくあなたのsvg.filters.blendの "乗算"です。 「乗算」ではなく「通常」を使用してください。