SVG 悬停时的 Shine/Sheen 效果？

Question

我是 SVG 动画的新手，我希望有人能帮助我实现效果。

我实际上有两个问题：1.）正如您在此 codepen中所看到的。我有一个 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“#Glow”渐变

  <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.）理想情况下，绘制动画完成后，我希望有一个在悬停时也会触发的光泽效果。就像这个 codepen。我尝试对渐变上的色标进行动画处理以实现这种效果，但效果非常糟糕。 http://codepen.io/StuffieStephie/pen/eJdWeJ

我真的不知道如何继续下去。有人能指出我正确的方向吗？

Answer 1

你似乎来到了一个艰难的地方......

我不确定这方面的规范建议，但从测试来看，svg 似乎linearGradient无法通过 CSS 进行动画处理。我猜这是因为它被视为图像，就像 CSS 渐变被视为 一样background-image。

<funcIRI>请注意，如果您将 a 放入其中 ( ) ，Firefox 甚至不会执行动画url(#yourElement)。我再次找不到有关此的规范，因此无法确定这是否是一个错误，但由于 Chrome 正在弃用 SMIL，这可能很快就会成为一个问题。

但今天，我能给您的唯一解决方法是使用 SMIL。

您可以使用<animate>元素来为您的linearGradient. 在上面的示例中，我仅对其中一个渐变进行动画stop-color处理#glow。

我还使用了其他动画线性渐变来实现闪耀效果。然后将该线性渐变应用为fill遮罩的属性，使渐变的黑色部分成为元素的唯一遮罩<mask>。
请注意，如果您确实使用绝对值，则 chrome 只会渲染偏移量的动画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>