動畫不是動畫，而不是跳躍結束

Question

我試圖使用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> 

目前，它只是從一開始就跳轉到該結束動畫，並沒有顯示我期望的平滑填充。

任何想法？

Answer 1

要使動畫平滑，路徑必須具有相同數量和類型的命令。

你的第一個路徑具有3個命令MH v

你的第二個路徑具有4個命令MHLL

你需要編寫使用2升的第一道命令，而不是V或第二的AV代替的兩個L命令。