避免圖像翻譯+縮放路徑背景

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