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＆＃39;＃Glow＆＃39;梯度

  <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设置动画。在上面的示例中，我仅对stop-color渐变的#glow进行动画处理。

我还使用了其他动画线性渐变来实现闪耀效果。然后将此线性渐变应用为蒙版的fill属性，使渐变的黑色部分成为<mask>元素的唯一蒙版。请注意，如果您使用绝对values ...

，则chrome仅执行渲染偏移的动画

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>

SVG悬停时的Shine / Sheen效果？

1 个答案: