闪/闪效应对悬停的SVG？

Question

我是新的SVG动画，我希望有人可以帮助我实现一个效果。

我实际上有两个问题: 1.)正如您在这个密码中所看到的。我有一个CSS关键帧动画，它画出一个形状，填充一个平面颜色，然后结束在一个SVG梯度。然而，它并没有正确地过渡到那个梯度(它只是有点“弹出”到那个状态在最后)

CSS动画

@-webkit-keyframes dash {
   0% {stroke-dashoffset: 900; fill:#FFF;}
   85% {stroke-dashoffset: 0; fill:#FFF;}
  90% {fill:#fce669;}
  100% {fill:url(#glow);}
}

SVG‘#发光’梯度

  <defs>
        <linearGradient id = "glow" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "100%">
            <stop stop-color = "#fce669" offset = "0%"/>
            <stop stop-color = "#fff" offset = "100%"/>
        </linearGradient>
  </defs>

是否有可能在这些州之间过渡？

好吧，撇开这点，我的真正问题是：

2.)理想情况下，在绘图动画完成后，我希望有一个光泽的效果，也是触发的悬停。就像这个密码。为了达到这个效果，我尝试了在渐变上的颜色停止动画，这是非常糟糕的。http://codepen.io/StuffieStephie/pen/eJdWeJ

我真的不知道该怎么做。有人能给我指明正确的方向吗？

Answer 1

你好像来了个艰难的地方..。

我不确定这方面的规范建议，但从测试来看，似乎svg的linearGradient不能通过CSS动画化。我想这是因为它被看作是一个图像，就像CSS梯度被看作是background-image一样。

请注意，如果在火狐中放置一个<funcIRI> (url(#yourElement))，它甚至不会执行动画。再一次，我找不到这方面的规格，所以不能确定这是否是一个错误，但由于Chrome正在反对SMIL，这可能很快就会成为一个问题。

但今天，我能给你的唯一解决办法就是使用SMIL。

您可以使用<animate>元素动画您的linearGradient。在上面的例子中，我只动画了一个stop-color的#glow梯度。

我还使用了另一个动画线性梯度的光泽效果。然后将这个线性梯度应用于掩码的fill属性，使渐变的黑色部分成为<mask>元素的唯一掩蔽。

请注意，如果使用绝对values，则铬只能渲染偏移量的动画.

​

svg {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.st0 {
  stroke-dasharray: 900;
  stroke-dashoffset: 0;
  fill: url(#glow);
  animation: dash 4s linear alternate;
  -webkit-animation: dash 4s linear alternate;
}
@keyframes dash {
  0% {
    stroke-dashoffset: 900;
  }
  85% {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 900;
  }
  85% {
    stroke-dashoffset: 0;
  }
}
.st2 {
  fill: #FFF;
}

<svg version="1.1" id="starmoon" class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 254.7 220.8" style="enable-background:new 0 0 254.7 220.8;" xml:space="preserve">
  <style type="text/css">
    .st0 {
      stroke: #EFA441;
      stroke-miterlimit: 10;
    }
  </style>
  <defs>
    <linearGradient id="glow" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop stop-color="#FFF" offset="0%">
        <animate id="color" attributeName="stop-color" from="#fff" to="#fce669" dur="0.8s" begin="3.2s" fill="freeze" />
      </stop>
      <stop stop-color="#fff" offset="100%" />
    </linearGradient>

    <!-- the gradient used by the mask -->
    <linearGradient id="shine" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop stop-color="white" offset="-10%">
        <animate attributeName="offset" values="-.05;.95" dur="2s" begin="color.end" />
      </stop>
      <stop stop-color="black" offset="-5%">
        <animate attributeName="offset" values="0;1" dur="2s" begin="color.end" />
      </stop>
      <stop stop-color="white" offset="0%">
        <animate attributeName="offset" values=".05;1.05" dur="2s" begin="color.end" />
      </stop>
    </linearGradient>


    <mask id="myShiningMask">
      <rect x="0" y="0" width="100%" height="100%" fill="url(#shine)" />
    </mask>

  </defs>
  <path fill="url(#glow)" class="st0 icon" d="M169,69.1l5.4-5.4c1.6-1.6,0.8-4.3-1.5-4.7l-42.6-7.6c-0.9-0.2-1.6-0.7-2-1.5l-19.7-38.4c-1-2-3.9-2-5,0
	L83.5,49.4c-0.4,0.8-1.2,1.3-2,1.4l-42.7,6.5c-2.2,0.3-3.2,3.1-1.6,4.7L67.3,93c0.6,0.6,0.9,1.5,0.8,2.4l-6.7,42.3
	c-0.4,2.2,1.9,3.9,4,3l38.9-18.7c0.8-0.4,1.7-0.4,2.5,0l38.6,19.7c2,1,4.4-0.6,4-2.9l-6.1-42.5c-0.1-0.9,0.2-1.8,0.8-2.4l15.2-15
	c10,9.6,16.2,23.1,16.2,38.1c0,29.3-23.7,53-53,53c-10,0-19.3-2.8-27.3-7.6c10.8,21.4,33,36.1,58.6,36.1c36.2,0,65.6-29.4,65.6-65.6
	C219.1,102,197.7,76.1,169,69.1z" mask="url(#myShiningMask)" />

  <circle class="st2" cx="87.9" cy="67.3" r="12.4" fill="white" />

</svg>

​