避免图像平移+路径背景缩放答案

【问题标题】：Avoid image translation + scale for path background避免图像平移+路径背景缩放
【发布时间】：2016-07-16 20:11:30
【问题描述】：

对于 SVG 路径，我将背景填充与包含可以缩放和平移的图像的过滤器相结合。

这是一个函数的完整代码，该函数负责修改可能包含图像的路径列表：

if (slots.image.length < 1) {
    return;
}

jQuery.each(slots.image, function (index, slot) {
    var imageSlot = slot.slotRef;
    var svg = slot.svg;

    var svgRoot = svg.root();
    var defsElements = jQuery('defs', svgRoot);
    var defs = defsElements.length > 0 ? defsElements.first() : svg.defs('customDefinitions');

    imageSlot.parent().show();
    imageSlot.show().attr('class', '');

    var sectionNumber = (index+1);
    var customImage = settings.customImages[sectionNumber];

    var bgColour = customImage.bgColour;
    imageSlot.css('fill', bgColour);

    var scale = customImage.scale;
    var moveX = customImage.moveX;
    var moveY = customImage.moveY;

    if (sectionNumber == getActiveImageArea()) {
        jQuery('#showScale').text(scale + '%');
        jQuery('#showMoveX').text(moveX);
        jQuery('#showMoveY').text(moveY);
    }

    if (customImage.file == '' || customImage.file == 'none') {
        return true; // continue;
    }

    var imageFile = customImage.file;
    var imageWidth = customImage.width;
    var imageHeight = customImage.height;

    jQuery('#customImage' + sectionNumber + 'Filter').remove();
    var filter = svg.filter(defs, 'customImage' + sectionNumber + 'Filter',
        0, 0, scale + '%', scale + '%',
        {
            filterUnits: 'objectBoundingBox'
        }
    );

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

    imageSlot.attr('filter', 'url(#customImage' + sectionNumber + 'Filter)');
});

这仍然存在一个问题：如果图像按比例缩小，背景也会按比例缩小。移动图像时也会发生同样的情况。这可能导致背景不再覆盖整个路径。

是否有可能只有图像被缩放和平移，而背景总是应用于整个路径？

【问题讨论】：

请发布您的代码
添加了上面的代码。
也许一种可能的方法是复制路径：一次在背景中填充背景颜色，另一次在其顶部包含图像过滤器和透明背景。这合理吗？其他想法？

标签： javascript image svg path svg-filters

【解决方案1】：

问题原因是我缩放了整个过滤器。更好的是使用preserveAspectRatio 属性，如下所述：Crop to fit an svg pattern

【讨论】：