Question

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

每当我尝试使用面具时，我什么也看不见。

代码相对简单（并且在示例中完美运行）：

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

syntactically。我已经注释掉了应该应用蒙版的代码，这样你就可以了解我的目标。

非常感谢任何帮助！

Answer 1

您遇到的问题是由于遮罩受虹膜圈上的transform（.circle），和自身变换影响。换句话说，变换正在应用两次。

有许多解决方案。一种方法是从掩码路径（.open）中删除transform属性。

您还需要为面具元素填充。如果它没有填充，则不会显示任何内容。原因是在蒙版中，黑色（或无/透明）对应于蒙版中的透明度，而白色对应于不透明。中间的颜色导致半透明区域。

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中使用掩码

1 个答案: