CODEWITHSUNDEEP
javascriptcsssvgd3.jsmask
Seb Waynee
Seb Waynee

Reputation: 325

SVG mask destroys SVG drop-shadow (inclusive fiddle)

I made a -SVG drop shadow and a -SVG mask

The mask is all white, so there should not be an influence to what we see.

What is wrong? Here is the fiddle comparing both cases: http://jsfiddle.net/LMH3X/

// JUST FILTER ----> it works
svg.append("image")
.attr("xlink:href", "someJpeg.jpeg")
.attr("...", "...")
.style("filter","url(#drop-shadow)");

// FILTER AND MASK ----> it does not work
svg.append("image")
.attr("xlink:href", "someJpeg.jpeg")
.attr("...", "...")
.style("filter","url(#drop-shadow)") 
.attr("mask","url(#mask1)");

I appreciate any hint!

Upvotes: 2

Views: 1043

Answers (1)

kalley
kalley

Reputation: 18462

You need to use the maskUnits attribute set to "userSpaceOnUse", since this will use your x, y, width, and height as the values.

I'm not an SVG expert, so I can't fully explain why it works. But if you don't specify it, it defaults to using the bounding box of the element.

Here's a fiddle showing it and below is the relevant code:

var mask = defs.append('mask')
        .attr('id', 'mask1')
        .attr('maskUnits', 'userSpaceOnUse')
        .append('rect')  
        .attr({
            x: 0,
            y: 0,
            width: 1000,
            height:1000,
            fill: 'white'
});

Upvotes: 3

Related Questions