避免图像翻译+路径背景的比例

For a SVG path I am combining a background filling with a filter containing an image which may be scaled and translated.

对于SVG路径,我将背景填充与包含可以缩放和翻译的图像的滤镜组合。

Here is the full code for a function which cares for amending a list of pathes which may contain images:

以下是一个函数的完整代码,它关注修改可能包含图像的pathes列表:

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

There remains one problem with this: if the image is scaled down the background is scaled down, too. The same happens when the image is moved. This can cause that the background does not cover the whole path anymore.

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

Is it possible that only the image is scaled and translated while the background is always applied to the whole path?

当背景始终应用于整个路径时,是否可能仅缩放和翻译图像?

1 个解决方案

#1

The problem cause is that I scaled the whole filter. Better is using the preserveAspectRatio attribute like described here: Crop to fit an svg pattern

问题的原因是我缩放了整个过滤器。更好的是使用如下所述的preserveAspectRatio属性:裁剪以适合svg模式