似乎無法獲取在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>