Question

我有一个svg路径，我同时应用背景颜色以及包含（可能缩放和翻译）图像的滤镜。

首先使用css fill属性应用背景颜色：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

它可能是＆＃34;倍增＆＃34;在你的svg.filters.blend中。只需使用＆＃34; normal＆＃34;而不是＆＃34;乘以＆＃34;。

将背景颜色和图像过滤器的组合应用于svg路径

1 个答案: