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、との両方で独自の影響を受けていることに起因します。つまり、変換は2回適用されます。

多くの解決策があります。 1つは、マスクパス（.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>