似乎无法在 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

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

有多种解决方案。一种是从蒙版路径中删除变换属性 (.open)。

您还需要填充遮罩元素。如果它没有填充，则不会显示任何内容。原因是在蒙版中，黑色（或none/transparent）对应蒙版中的透明，白色对应不透明。中间的颜色会产生半透明区域。

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>

似乎无法在 Snap.svg 中使用面具

Can't seem to get a mask working in Snap.svg

javascript

svg

snap.svg