我如何动画这个SVG剪辑路径悬停效果？(How do I animate this SVG clip

我想从一个三角形上悬停状态下的方形动画改造剪辑路径，但我似乎无法得到它的工作的权利。

我设置了在演示http://jsfiddle.net/jcypykdk/其实质上显示了我想做的事，减去任何动画。

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

我想三角形成长为上悬停状态的广场，然后退缩成三角形当光标离开元素。

我已经尝试了许多不同的技术来实现这一点，但在这一点上我很茫然。 任何帮助是极大的赞赏。

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:

使用这个链接我能创造你正在寻找与下面的代码的效果，这是您的效果的选项。 正如你所提到的，浏览器的兼容性是不是为这个伟大的，但它确实在Chrome版本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

文章来源: How do I animate this SVG clip-path hover effect?