0

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?

rpeg
  • 228
  • 3
  • 14

0 Answers0