Bildumwandlung vermeiden + Skalierung für Pfadhintergrund

Question

Für einen SVG-Pfad kombiniere ich eine Hintergrundfüllung mit einem Filter, der ein Bild enthält, das skaliert und übersetzt werden kann. Hier

ist der vollständige Code für eine Funktion, die für die Änderung eine Liste von pathes kümmert sich die Bilder enthalten:

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

Es bleibt ein Problem dabei: Wenn das Bild nach unten skaliert wird der Hintergrund skaliert nach unten , auch. Das gleiche passiert, wenn das Bild verschoben wird. Dies kann dazu führen, dass der Hintergrund nicht mehr den gesamten Pfad abdeckt.

Ist es möglich, dass nur das Bild skaliert und übersetzt wird, während der Hintergrund immer auf den gesamten Pfad angewendet wird?

Answer 1

Das Problem ist, dass ich den gesamten Filter skaliert habe. Besser ist die Verwendung der preserveAspectRatio Attribut wie hier beschrieben: Crop to fit an svg pattern