CODEWITHSUNDEEP
cssanimationsvg
Evster
Evster

Reputation: 2552

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

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.

Upvotes: 1

Views: 4071

Answers (2)

Robert Longson
Robert Longson

Reputation: 123985

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>

Upvotes: 2

ctwheels
ctwheels

Reputation: 22817

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

Upvotes: 1

Related Questions