How do I animate this SVG clip-path hover effect?

Question

I am trying to animate the transformation a clip-path from a triangle to a square on the hover state, but I just can't seem to get it working right.

I set up a demo at http://jsfiddle.net/jcypykdk/ which essentially shows what I want to do, minus any animation.

HTML:

<svg id="svg-1" class="clip-svg" width="150" height="150">
    <a xlink:href="http://google.com" class="svg-link">
        <image id="img-1" class="svg-image" width="150" height="150" x="0" y="0" xlink:href="http://lorempixel.com/output/city-q-c-150-150-10.jpg" />

        <defs>
            <clipPath id="clip-triangle">
                <polygon points="0,0 75,75 150,150 0,150" />
            </clipPath>
        </defs>

        <defs>
            <clipPath id="clip-square">
                <polygon points="0,0 0,150 150, 150 150, 0" />
            </clipPath>
        </defs>
    </a>
</svg>

CSS:

.svg-image, .svg-link {
    clip-path: url(#clip-triangle);
}

.svg-image:hover, .svg-link:hover {
    clip-path: url(#clip-square);
}

.svg-image,
.svg-link {
    transition: all 0.5s ease 0.2s;
    -moz-transition: all 0.5s ease 0.2s;
    -webkit-transition: all 0.5s ease 0.2s;
}

#img-1 {
    display: block;
    margin: auto;
}

I want the triangle to grow into a square on the hover state, and then shrink back into a triangle when the cursor leaves the element.

I have tried many different techniques to achieve this but at this point I am at a loss. Any help is greatly appreciated.

Answer 1

This shows you how to begin a SMIL solution which will work in Chrome and Firefox and possibly IE if you use fakesmile. You could do the easing using calcMode="spline" which I haven't done here.

Note that in order to keep the - in the id I have to escape it with a \ sign in the begin attribute.

.svg-image, .svg-link {
    clip-path: url(#clip-triangle);
}

<svg id="svg-1" class="clip-svg" width="150" height="150">
    <a xlink:href="http://google.com" class="svg-link">
        <image id="img-1" class="svg-image" width="150" height="150" xlink:href="https://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" />
		   
        <defs>
            <clipPath id="clip-triangle">
                <polygon points="0,0 75,75 150,150 150,0">
                    <animate begin="img\-1.mouseover" attributeName="points" to="0,0 0,150 150,150 150, 0" dur="0.5s" fill="freeze"/>
                    <animate begin="img\-1.mouseout" attributeName="points" to="0,0 75,75 150,150 150,0" dur="0.5s" fill="freeze"/>
                </polygon>
            </clipPath>
        </defs>
    </a>
</svg>

Answer 2

Using this link I was able to create the effect you are looking for with the following code, this is an option for your effect. As you've mentioned, browser compatibility isn't great for this, however it does work on Chrome Version 36.0.1985.125 m

HTML

<a href="http://google.com" class="svg-link">
    <img id="img-1" src="http://wpdemo.rohitink.com/sixteen/wp-content/uploads/2013/03/image-alignment-150x150.jpg"/>
</a>

CSS

#img-1{
    shape-inside:polygon(0 0, 75px 75px, 150px 150px, 0 150px);
    transition:all 2s ease;
    -webkit-clip-path: polygon(0 0, 75px 75px, 150px 150px, 0 150px);
}
#img-1:hover{
    shape-inside:polygon(0 0, 150px 0, 150px 150px, 0 150px);
    -webkit-clip-path:polygon(0 0, 150px 0, 150px 150px, 0 150px);
}

jsfiddle