如何在Safari中为svg多边形设置动画?

时间:2014-10-14 06:05:17

标签: svg safari polygon masking

这是: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中不起作用。有没有办法解决这个问题?我的掩蔽技术不合适吗?

0 个答案:

没有答案