Here it is: 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>
I use polygons that contain images to create a masking effect. I then animate the polygons. Animating them, I'm assuming, does not work in Safari 7. Is there a way to resolve this? Was my masking technique not appropriate?