[英]On hover change SVG from colour to gradient with a transition
I have an SVG image which I would like to change from a block colour to a gradient. 我有一个SVG图像,我希望将其从块颜色更改为渐变。 I have got this working, however I would like to have a transition or animation.
我已经完成了这项工作,但是我希望有一个过渡或动画。 Is this possible - if so how would it be achieved?
这是否可能-如果可以,将如何实现?
http://jsfiddle.net/otaxjpa2/ http://jsfiddle.net/otaxjpa2/
HTML: HTML:
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%" >
<stop offset="0" style="stop-color:#1EBEE0"/>
<stop offset="1" style="stop-color:#952491"/>
<animate attributeName="fy"from="0" to="1" dur="5s" repeatCount="indefinite" />
</linearGradient>
</defs>
<path id="time-3-icon" d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206
C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161
C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505
c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081
c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z"/>
</svg>
CSS: CSS:
svg {
fill: blue;
transition: all 0.3s ease;
display: inline-block;
-webkit-transition: fill .4s ease;
-moz-transition: fill .4s ease;
-o-transition: fill .4s ease;
transition: fill .4s ease;
}
svg:hover {
fill: url(#gradient);
}
Any pointers would be much appreciated! 任何指针将不胜感激!
You can avoid using two rects by transitioning the stop-color
s instead: 您可以通过转换
stop-color
来避免使用两个矩形:
svg { display: inline-block; } stop { -webkit-transition: .4s ease; transition: .4s ease; } /* Use the colors to transition to */ svg:hover stop:first-child { stop-color: #1EBEE0; } svg:hover stop:last-child { stop-color: #952491; }
<svg width="96px" height="96px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <defs> <linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%"> <stop offset="0" stop-color="blue" /> <!-- Colors to transition from --> <stop offset="1" stop-color="blue" /> </linearGradient> <mask id="clock-icon-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="512" height="512"> <path d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z" fill="white" /> </mask> </defs> <g mask="url(#clock-icon-mask)"> <rect x="0" y="0" width="512" height="512" fill="url(#gradient)" /> </g> </svg>
Here's a demo of the technique using a simplified shape (no mask required). 这是使用简化形状(无需遮罩)的技术演示 。
Put the two fill styles on overlapping <rect>
objects, and use the clock icon as a mask object applied to both <rect>
objects. 将两种填充样式放在重叠的
<rect>
对象上,并将时钟图标用作应用于这两个<rect>
对象的蒙版对象。 You can then animate the apparent fill style by animating the opacity of the uppermost <rect>
. 然后,可以通过对最上面的
<rect>
的不透明度进行动画处理来为外观填充样式设置动画。 Remember to apply a white fill to the mask object (white=opaque, black=transparent). 请记住将白色填充应用于蒙版对象(白色=不透明,黑色=透明)。
If the following snippet doesn't work, try this jsfiddle link . 如果以下代码段不起作用,请尝试使用此jsfiddle链接 。
#clock-gradient { opacity: 0.0; display: inline-block; -webkit-transition: opacity .4s ease; -moz-transition: opacity .4s ease; -o-transition: opacity .4s ease; transition: opacity .4s ease; } #clock-gradient:hover { opacity: 1.0; }
<svg width="96px" height="96px" viewBox="0 0 512 512" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="gradient" gradientUnits="userSpaceOnUse" fy="90%"> <stop offset="0" style="stop-color:#1EBEE0" /> <stop offset="1" style="stop-color:#952491" /> </linearGradient> <mask id="clock-icon-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="512" height="512"> <path d="M256,50C142.229,50,50,142.229,50,256c0,113.77,92.229,206,206,206c113.77,0,206-92.23,206-206C462,142.229,369.77,50,256,50z M256,417c-88.977,0-161-72.008-161-161c0-88.979,72.008-161,161-161c88.977,0,161,72.007,161,161C417,344.977,344.992,417,256,417z M382.816,265.785c1.711,0.297,2.961,1.781,2.961,3.518v0.093c0,1.72-1.223,3.188-2.914,3.505c-37.093,6.938-124.97,21.35-134.613,21.35c-13.808,0-25-11.192-25-25c0-9.832,14.79-104.675,21.618-143.081c0.274-1.542,1.615-2.669,3.181-2.669h0.008c1.709,0,3.164,1.243,3.431,2.932l18.933,119.904L382.816,265.785z" fill="white" /> </mask> </defs> <g mask="url(#clock-icon-mask)"> <rect x="0" y="0" width="512" height="512" fill="blue" /> <rect id="clock-gradient" x="0" y="0" width="512" height="512" fill="url(#gradient)" /> </g> </svg>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.