Arka plan rengi ve görüntü filtresinin birleşimini svg yoluna uygula

Question

Hem arka plan rengini hem de (olası ölçeklenmiş ve çevrilmiş) bir görüntü içeren bir filtreyi uyguladığım bir svg yol var. ,

var filter = svg.filter(defs, 'myImageFilter', 
    0, 0, scale + '%', scale + '%', 
    { 
     filterUnits: 'objectBoundingBox' 
    } 
); 

// add the image 
var outputSlot = 'myImage' + sectionNumber; 
svg.filters.image(filter, outputSlot, pathToImageFile); 
// move it 
svg.filters.offset(filter, 'movedImage', outputSlot, moveX, moveY); 
// combine image with path for clipping 
svg.filters.composite(filter, 'clip', 'in', 'movedImage', 'SourceGraphic'); 
// mix both images 
svg.filters.blend(filter, '', 'multiply', 'SourceGraphic', 'clip'); 

// assign filter to the path 
myPath.attr('filter', 'url(#myImageFilter)'); 

Ben buna sahip sorun arka plan rengini görüntüsünü etkiler:

myPath.css('fill', bgColour); Ardından filtre şöyle eklenir:

İlk arka plan rengi css dolgu özelliği kullanılarak uygulanır (resmin üzerine çizilmiş gibi). İhtiyacım olan şey, resmin arka planın üzerine yerleştirilmiş olmasıdır.

Bunu nasıl gerçekleştireceğiniz hakkında bir fikriniz var mı?

Arka plan rengi için yalnızca bir kez ve görüntü için bir kez olmak için tüm yolu çoğaltmak zorunda mıyım?

Answer 1

Muhtemelen svg.filters.blend öğesinde "çoğalır". Sadece "çarpın" yerine "normal" kullanın.