SVG悬停时的光泽/光泽效果？

Question

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

其实我有两个问题： 1.) 正如您在this 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.) 理想情况下，绘制动画完成后，我希望有一个在悬停时也会触发的光泽效果。喜欢this codepen。我尝试为渐变上的颜色停止设置动画以实现此效果，这非常糟糕。 http://codepen.io/StuffieStephie/pen/eJdWeJ

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

Answer 1

你来这里似乎有些困难......

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

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

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

您可以使用<animate> 元素为您的linearGradient 设置动画。在上面的示例中，我只为#glow 渐变中的一个stop-color 设置了动画。

我还使用了其他动画线性渐变来实现发光效果。然后将此线性渐变用作遮罩的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>