如何在Safari中设置svg多边形的动画？

这是：

---

我使用包含图像的多边形来创建遮罩效果。然后设置多边形的动画。我想，在Safari 7中，为它们设置动画是不可行的。有办法解决这个问题吗？我的掩蔽技术不合适吗？

JSFIDLE在我的Safari 7.1版上可以动画吗？我刚意识到我是7.0.2。谢谢你指出这一点。

<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>