避免图像翻译+缩放路径背景

Question

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

下面是其中关心修正，其可含有图像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)'); 
}); 

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

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

Answer 1

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