我怎么这个动画短片SVG路径悬停效果？ [英] How do I animate this SVG clip-path hover effect?

问题描述

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

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

HTML

 ＆LT; SVG ID =SVG-1级=夹式SVGWIDTH =150HEIGHT =150＆GT;
    ＆LT;一的XLink：HREF =htt​​p://google.com级=SVG链接＆GT;
        ＆lt;图像ID =IMG-1类=SVG-图像宽度=150HEIGHT =150×=0Y =0的xlink：HREF =htt​​p://lorempixel.com/输出/城市QC-150-150-10.jpg/＆GT;        ＆LT;＆DEFS GT;
            ＆LT; clipPath ID =夹子三角＆GT;
                ＆LT;多边形点=0,0 75,75 150,150 0150/＆GT;
            ＆LT; / clipPath＆GT;
        ＆LT; / DEFS＆GT;        ＆LT;＆DEFS GT;
            ＆LT; clipPath ID =夹子方＆GT;
                ＆LT;多边形点=0,0 0150 150 150 150 0/＆GT;
            ＆LT; / clipPath＆GT;
        ＆LT; / DEFS＆GT;
    ＆所述; / A＆GT;
＆LT; / SVG＆GT;
 

CSS：

  .SVG图像，.SVG链接{
    夹路径：网址（＃夹式三角形）;
}.SVG图像：悬停，.SVG链接：悬停{
    夹路径：网址（＃夹子方）;
}.SVG图像，
.SVG链接{
    过渡：所有0.5S 0.2S方便;
    -moz-过渡：所有0.5S 0.2S缓解;
    -webkit-过渡：所有0.5S 0.2S缓解;
}＃IMG-1 {
    显示：块;
    保证金：汽车;
}
 

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

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

解决方案

这显示了你，如果你使用的 fakesmile 。你可以使用 CALCMODE =样条曲线做宽松这是我的天堂 ŧ在这里完成的。

请注意，为了保持 - ID中的我有在开始属性\\标志，以逃避它。

。

\r

\r

.SVG图像，.SVG链接{\r
    夹路径：网址（＃夹式三角形）;\r
}

\r

＆LT; SVG ID =SVG-1级=夹式SVG宽度=150HEIGHT =150＆GT;\r
    ＆LT;一的XLink：HREF =htt​​p://google.com级=SVG链接＆GT;\r
        ＆lt;图像ID =IMG-1级=SVG图像WIDTH =150HEIGHT =150的XLink：HREF =htt​​ps://upload.wikimedia.org/wikipedia/mediawiki/a/a9/ Example.jpg/＆GT;\r
\r
        ＆LT;＆DEFS GT;\r
            ＆LT; clipPath ID =夹子三角＆GT;\r
                ＆LT;多边形点=0,0 75,75 150,150 150,0＆GT;\r
                    ＆LT;动画开始=IMG \\ -1.mouseover的attributeName =点到=0,0 0150 150,150 150，0DUR =0.5秒补=冻结/＆GT;\r
                    ＆LT;动画开始=IMG \\ -1.mouseout的attributeName =点到=0,0 75,75 150,150 150,0DUR =0.5秒补=冻结/＆GT;\r
                ＆LT; /多边形＆GT;\r
            ＆LT; / clipPath＆GT;\r
        ＆LT; / DEFS＆GT;\r
    ＆所述; / A＆GT;\r
＆LT; / SVG＆GT;

\r

\r

\r

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.

解决方案

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>

这篇关于我怎么这个动画短片SVG路径悬停效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！