我正在尝试使用 Snap.svg 创建 SVG 动画。
每次我尝试敷面膜时,我都什么也看不见。
代码相对简单(并且在示例中完美运行):
var open = s.select('.open');
var circle = s.select('.circle').attr({mask:open});
Here's the whole example 。我已经注释掉了应该应用掩码的代码,以便您可以了解我要做什么。
任何帮助将不胜感激!
最佳答案
您遇到的问题是由于 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>
关于javascript - 似乎无法在 Snap.svg 中使用 mask ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38557517/