动画不是动画，而不是跳跃结束

2016-03-29 57 views 1 likes

我试图使用SVG动画标签路径从半改变填写完整的填充动画不是动画，而不是跳跃结束

 <svg class="background-gradient" viewBox="0 0 100 100" preserveAspectRatio="none"> 
      <defs> 
       <linearGradient id="grad"> 
        <stop offset="0%" stop-color="rgba(82,181,244,.1)" stop-opacity="1"></stop> 
        <stop offset="100%" stop-color="rgba(70,215,255,.7)" stop-opacity="1"></stop> 
       </linearGradient> 
      </defs> 
      <path id="scroll-path" d="M0 0 H100 v 100" fill="url(#grad)"> 
       <animate attributeName="d" from="M0 0 H100 v 100" to="M0 0 H100 L100 100 L0 100" dur="1s" repeatCount="indefinite" /> 
      </path> 
     </svg>

目前，它只是从一开始就跳转到该结束动画，并没有显示我期望的平滑填充。

任何想法？

来源

2016-03-29 Kieranmv95

回答

要使动画平滑，路径必须具有相同数量和类型的命令。

你的第一个路径具有3个命令MH v

你的第二个路径具有4个命令MHLL

你需要编写使用2升的第一道命令，而不是V或第二的AV代替的两个L命令。

来源

2016-03-29 12:48:18

动画不是动画，而不是跳跃结束

回答

相关问题