在悬停时，通过过渡将SVG从纯色变为渐变。

Question

在悬停时，通过过渡将SVG从纯色变为渐变。

16

我有一个SVG图像，我想将它从单色变为渐变色。我已经实现了这个功能，但我想要添加过渡或者动画效果。这是否可行-如果可以，如何实现？

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：

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

任何指针都将不胜感激！

- user1788364

据我所知，您无法这样做。实际上，您正在尝试为背景图像创建动画效果...这些图像没有中间步骤，因此无法使用CSS进行动画处理。 - Paulie_D

最好的情况是，您可能能够使用渐变来填充初始值，并通过JS动画属性。 - Paulie_D

目前我正在尝试探索动画类 - 也许如果我可以将其作为填充颜色开始，然后将其动画化为渐变 - 这是我的进展情况：http://jsfiddle.net/otaxjpa2/5/ - user1788364

@Paulie_D 你可以通过在悬停时更改SVG渐变本身来解决这个问题。 - Zach Saucier

2个回答

13

将两个填充样式放在重叠的<rect>对象上，并使用时钟图标作为应用于两个<rect>对象的蒙版对象。然后，通过动画化最上层<rect>的不透明度来动画化表面填充样式。请记得对掩模对象应用白色填充（白色=不透明，黑色=透明）。

如果以下代码片段无法正常工作，请尝试使用此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>

- r3mainer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Saucier · Accepted Answer

您可以通过过渡stop-color来避免使用两个矩形：

svg {
    display: inline-block;
}

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

这里有一个演示，展示了使用简化形状（不需要遮罩）的技术。