【发布时间】：2016-06-23 14:15:01
【问题描述】：
在我的应用程序中，使用图像来遮盖 SVG 形状比反过来更方便。 （无论哪种方式都可以实现所需的多色叠加效果。）问题是，当我使用普通（灰度）图像作为蒙版时，结果看起来像底片。是否有 SVG 属性或聪明的 JS/D3 技巧可以用来告诉浏览器反转其掩码协议，或者我是否坚持自己转换图像（这可能最终不如其他方式方便）？
更新小例子：
<!DOCTYPE html>
<title>Image mask</title>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js">
</script>
<body>
<div>
<button>toggle</button>
</div>
</body>
<script>
var width = 194,
height = 240;
maskWidth = 30;
var svg = d3.select('body').append('svg')
.attr('height', 500);
var myMask = svg.insert('mask', ':first-child')
.attr('id', 'image_mask');
var marilyn = myMask.append('image')
.attr('width', width)
.attr('height', height)
.attr('xlink:href', "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/Marilyn_Monroe_photo_pose_Seven_Year_Itch.jpg/194px-Marilyn_Monroe_photo_pose_Seven_Year_Itch.jpg");
var positive = svg.append('rect')
.attr('width',maskWidth)
.attr('height', height)
.attr('fill', 'red')
.attr('mask', 'url(#image_mask)');
var negative = svg.append('rect')
.attr('x', maskWidth)
.attr('width', width - maskWidth)
.attr('height', height)
.attr('fill', 'green')
.attr('mask', 'url(#image_mask)');
var toggle = false;
d3.select('button').on('click', function() {
toggle = !toggle;
positive.transition()
.attr('height', toggle ? height/2 : height);
});
</script>【问题讨论】：
-
你可以用 SVG 过滤器做很多事情 - 请发布你的代码以适应
-
@MichaelMullany 好的，我已经发布了一个最小的示例。