将背景颜色和图像过滤器的组合应用到 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)');

我遇到的问题是背景颜色也会影响图像（就好像它被画在图像上方一样）。我需要的是图像被放置在背景之上。

知道如何实现这一点吗？

我是否可能需要复制整个路径以使其一次仅用于背景颜色和一次用于图像？

Answer 1

这可能是 svg.filters.blend 中的“乘法”。只需使用“正常”而不是“乘法”即可。