似乎无法获取在Snap.svg中工作的蒙版

Question

我正尝试使用Snap.svg创建SVG动画。

每次我尝试应用面膜时，我什么都看不到。

的代码是相对简单的（且在实施例中完美地工作）：

var open = s.select('.open'); 
var circle = s.select('.circle').attr({mask:open}); 

Here's the whole example。我已经注释了应该使用掩码的代码，以便了解我要做什么。

任何帮助将不胜感激！

Answer 1

您有被事实面具是由两对你的虹膜圆（.circle），和自身的改造transform造成影响的问题。换句话说，变换正在被应用两次。

有许多解决方案。一种方法是从掩码路径中删除transform属性（.open）。

您还需要给你的面具元素填充。如果没有填充，则不会显示。原因是在面具中，黑色（或无/透明）对应于面具的透明度，白色对应于不透明。之间的颜色导致半透明区域。

var s = Snap('#eye'); 
 

 
var open = s.select('.open'); 
 
var circle = s.select('.circle') 
 
       .attr({mask:open}); 
 

 
function closeEye() { 
 
    open.animate({ d: "M317.44,135.56s-3,7.41-14,7.41c-10.23,0-13.39-7.44-13.39-7.44s3.16,7.44,13.39,7.44C314.44,143,317.44,135.56,317.44,135.56Z" }, 200, mina.easeinout,openEye); 
 
} 
 

 
function openEye() { 
 
    console.log('callback fired'); 
 
    open.animate({ d: "M317.44,135.56s-3-7.59-14-7.59c-10.23,0-13.39,7.56-13.39,7.56s3.16,7.44,13.39,7.44C314.44,143,317.44,135.56,317.44,135.56Z" }, 200, mina.easeinout); 
 
} 
 

 
$(document).ready(function() { 
 
    closeEye(); 
 
    $('#eye').mouseenter(function() { 
 
\t \t closeEye(); 
 
    console.log('hovered'); 
 
    }); 
 
});

.circle, .open { 
 
stroke-width: 1px; 
 
stroke-linecap: rounded; 
 
stroke:black; 
 
fill: none; 
 
} 
 
.open { 
 
fill: white; 
 
} 
 

 
.svg-wrapper { 
 
    width:100px; 
 
    height:auto; 
 
    position:relative; 
 
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="svg-wrapper"> 
 
<svg id="eye" viewBox="0 0 28.5 16"> 
 
<defs></defs> 
 
    
 
<path class="circle" d="M309.56,135.47a5.82,5.82,0,1,1-5.82-5.82A5.82,5.82,0,0,1,309.56,135.47Z" transform="translate(-289.48 -127.47)"/> 
 

 
<path class="open" d="M317.44,135.56s-3-7.59-14-7.59c-10.23,0-13.39,7.56-13.39,7.56s3.16,7.44,13.39,7.44C314.44,143,317.44,135.56,317.44,135.56Z"/> 
 

 
</svg> 
 
</div>