这是:http://jsfiddle.net/vbsLpz7h/
<div style="margin-left: 0px; float: left; display: block; position: relative; z-index: 99">
<svg width="232" height="467">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="232" height="670">
<image xlink:href="http://aug4th.com/test_image.png" x="0" y="0" width="232" height="467" style="margin-top: 210px;" />
</pattern>
</defs>
<polygon
fill="url(#img1)"
stroke-width="3"
points='
0, -467
232, -467
232, 0
232, 467
0, 467
0, 0
'>
<animate
id="anim1_1"
attributeType="XML"
attributeName="points"
begin="0s"
dur="1s"
from="
0, -467
232, -467
232, -467
0, 0
0, -467
"
to="
0, -467
232, -467
232, 467
0, 934
0, 467
"
fill="freeze"
></animate>
</polygon>
</svg>
</div>
<div style="margin-left: -90px; float: left; display: block; position: relative; z-index: 98">
<svg width="232" height="467">
<defs>
<pattern id="img2" patternUnits="userSpaceOnUse" width="232" height="670">
<image xlink:href="http://aug4th.com/test_image.png" x="0" y="0" width="232" height="467" />
</pattern>
</defs>
<polygon
fill="url(#img2)"
stroke-width="3"
points='
0, -467
232, -467
232, 0
232, 467
0, 467
0, 0
'>
<animate
id="anim1_2"
attributeType="XML"
attributeName="points"
begin="0s"
dur="1s"
from="
0, 934
232, 467
232, 934
0, 934
0, 934
"
to="
0, 0
232, -467
232, 934
0, 934
0, 0
"
fill="freeze"
></animate>
</polygon>
</svg>
</div>
我使用包含图像的多边形来创建遮罩效果。然后我为多边形设置动画。我假设它们的动画效果在Safari 7中不起作用。有没有办法解决这个问题?我的掩蔽技术不合适吗?