javascript - 似乎无法在 Snap.svg 中使用 mask

Question

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

每次我尝试敷面膜时，我都什么也看不见。

代码相对简单(并且在示例中完美运行):

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

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

任何帮助将不胜感激!

Answer 1

您遇到的问题是由于 mask 受到虹膜圆 (.circle) 上的变换、和 它自己的变换。换句话说，变换被应用了两次。

有多种解决方案。一种方法是从 mask 路径 (.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() {
		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>