SVG遮罩破坏SVG投影(包括小提琴)

Question

我做了一个-SVG投影和一个svg面具

蒙版是全白色的，所以应该不会影响我们看到的。

怎么了?下面是比较两种情况的小提琴: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)");

我感谢任何提示!

Answer 1

您需要使用maskUnits属性设置为"userSpaceOnUse"，因为这将使用您的x, y, width和height作为值。

我不是SVG专家，所以我不能完全解释为什么它工作。但是如果你不指定它，它默认使用元素的边界框。

下面是相关代码:

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