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 영향을한다는 사실로 인해 발생 데 문제. 즉, 변환이 두 번 적용됩니다.

다양한 솔루션이 있습니다. 하나는 마스크 경로 (.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>