画像の変換+パスの背景の縮尺を避ける

Question

SVGパスの場合、拡大縮小して変換することができる画像を含むフィルタで背景の塗りつぶしを結合しています。

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

はこれで一つの問題が残って：：画像が縮小されている場合背景が縮小される。ここ

は、画像が含まれていてもよいpathesのリストを修正するために気遣う関数の完全なコードです、あまりにも。画像が移動しても同じことが起こります。これにより、バックグラウンドがパス全体をカバーしなくなる可能性があります。

バックグラウンドが常にパス全体に適用されている間に、画像のみが拡大縮小され、平行移動される可能性はありますか？

Answer 1

問題の原因は、フィルタ全体を拡大したことです。 preserveAspectRatioのような属性を使用すると便利です。Crop to fit an svg pattern