Question

我试图在悬停状态下将剪辑路径从三角形变为动画的转换动画，但我似乎无法使其正常工作。

我在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

这将向您展示如何使用fakesmile开始在Chrome和Firefox以及可能的IE中使用的SMIL解决方案。你可以使用calcMode="spline"进行宽松，我在这里没有做过。

请注意，为了保持 - 在id中我必须使用begin属性中的\符号对其进行转义。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用this链接我可以使用以下代码创建您要查找的效果，这是您的效果选项。正如您所提到的，浏览器兼容性并不是很好，但它适用于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

如何设置此SVG剪辑路径悬停效果的动画？

2 个答案: