2016-04-28 18 views
0

Ich habe einen Pfad mit einem Bild, das durch einen Filter hinzugefügt wird. Auch hat der Weg eine Hintergrundfarbe wie folgt festgelegt:SVG-Pfad mit Bildfilter aber transparentem Hintergrund

myPath.css('fill', bgColour);

Meine Frage ist, wie es möglich ist, den Weg transparent zu haben, aber das Bild sichtbar halten?

Ich versuchte fill: transparent, , fill: rgba(0, 0, 0, 1), aber mit diesen wird das Bild auch unsichtbar.

Hier ist mein aktueller Code:

var filter = svg.filter(defs, 'myFilter', 0, 0, '100%', '100%', filterOptions); 

var sourcePathRef = 'SourceGraphic'; 
if (hasTransparentBackground()) { 
    // make path transparent 
    svg.filters.colorMatrix(filter, 'TransformedGraphic', sourcePathRef, 'matrix', [ 
     [0, 0, 0, 0, 0], 
     [0, 0, 0, 0, 0], 
     [0, 0, 0, 0, 0], 
     [0, 0, 0, 0, 0] 
    ]); 
    sourcePathRef = 'TransformedGraphic'; 
} 

// add the image 
var outputSlot = 'customImage'; 
svg.filters.image(filter, outputSlot, imageFile, { 
    preserveAspectRatio: aspectRatio 
}); 
// move it 
svg.filters.offset(filter, 'movedImage', outputSlot, moveX, moveY); 
// combine image with path for clipping 
svg.filters.composite(filter, 'clip', 'in', 'movedImage', sourcePathRef); 
// mix both images 
svg.filters.blend(filter, '', 'normal', 'clip', sourcePathRef); 
// apply the filter 
imageSlot.attr('filter', 'url(#myFilter)'); 
+0

Was bedeutet es für den Weg transparent zu sein, aber das Bild sichtbar? –

+0

Wenn das Bild kleiner als der Pfad ist, sollten die restlichen Bereiche des Pfads nicht mit einer Farbe gefüllt werden, sondern zeigen, was sich hinter der SVG-Datei befindet (z. B. ein Hintergrundbild). – Guite

+0

Warum nicht ein Bild als Bild direkt zeichnen und es nur auf einen Pfad dann schneiden? –

Antwort

0

Einfach fix: überspringt die letzte (Blend) -Filter :-)

Verwandte Themen