Kann nicht scheinen, eine Maske in Snap.svg

Question

zu arbeiten Ich versuche, eine SVG-Animation mit Snap.svg zu erstellen.

Jedes Mal wenn ich versuche, eine Maske anzubringen, sehe ich nichts.

Der Code ist relativ einfach (und funktioniert perfekt in den Beispielen):

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

Here's the whole example. Ich habe den Code auskommentiert, der die Maske anwenden sollte, damit Sie eine Vorstellung davon bekommen, wofür ich vorgehe.

Jede Hilfe wäre sehr willkommen!

Answer 1

Das Problem, das Sie haben wird dadurch verursacht, dass die Maske durch beide betroffen ist die transform auf Ihrem Iris Kreis (.circle), und seine eigene verwandeln. Mit anderen Worten, die Transformation wird zweimal angewendet.

Es gibt eine Reihe von Lösungen. Eine wäre, das Transformationsattribut aus Ihrem Maskenpfad zu entfernen (.open).

Sie müssen Ihrem Maskenelement auch eine Füllung geben. Wenn es keine Füllung hat, wird nichts angezeigt. Der Grund dafür ist, dass in Masken Schwarz (oder nicht/transparent) der Transparenz in der Maske entspricht und Weiß dem Opak entspricht. Farben dazwischen ergeben durchscheinende Bereiche.

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>