如何使用snap.svg或svg屏蔽元素的内部

Question

我想知道是否可以屏蔽元素的一部分 与另一个元素的形状。这听起来有点抽象，所以我邀请你看看这个例子：

Here is an example我想做的事情。

示例html（只是一个可视化示例）：

<div id="tomask"></div>
<div id="mask"></div>
<p>I want the darker part to be transparent</p>

示例css（相同）：

#tomask{
margin:50px;
width:100px;
height:100px;
background:black;
opacity:0.3;
position:absolute;
top:0;
left:0;
}

#mask{
margin:60px;
width:80px;
height:80px;
background:black;
opacity:0.3;
position:absolute;
top:0;
left:0;
}