Question

首先，这是我在codepen上的简单示例：

<div class="wrapper">
    <img id="slider" src="http://i.imgur.com/iBQDddD.jpg" alt="">
    <svg id="drawing">  
    </svg>
</div>

#slider{
    position: relative;
    width: 80vw;
    height: 80vh;
}
#drawing{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
}


$(document).ready(function(){

var slider_height = $("#slider").height();
var slider_width = $("#slider").width();


var s = Snap("#drawing");

var overlay = s.rect(0,0,slider_width,slider_height).attr({fill:'white',opacity:0.5});

var image = s.image('http://i.imgur.com/4fgQczZ.png', 0, 0, slider_width,slider_height);


});

我想要做的是从叠加层中减去字体图像，以便将字体转换为透明。它应该类似于-webkit-mask-image。是否可以使用snap.svg执行此操作，还是应该使用另一个框架？我也测试了svg.js，但我不知道如何做到这一点。有人可以帮帮我吗？

非常感谢！

面具与Snap.svg

0 个答案: