Yol arka planı için görüntü çevirisi + ölçeğinden kaçının

Question

Bir SVG yolu için, arka plan dolgusunu ölçeklendirilebilen ve çevrilebilen bir görüntü içeren bir filtreyle birleştiriyorum.

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

bununla bir problem var kalır:: Görüntü küçültülmüş ise arka plan küçültülür İşte

resimler içerebilir pathes listesini değiştirilmesi için umurunda bir işlev için tam koddur ayrıca Görüntü taşındığında aynı şey olur. Bu, arka planın artık tüm yolu kapsamaz.

Arka plan her zaman yolun tamamına uygulanırken yalnızca görüntünün ölçeklendirilip çevrilmesi mümkün mü?

Answer 1

Sorun nedeni, tüm filtreyi ölçeklendirdiğim. Daha iyi açıklandığı gibi preserveAspectRatio özniteliği kullanıyor: Crop to fit an svg pattern