title: How to animate svg path d attribute with animate tag
body: <p>Im trying to animate a <code>svg</code> <code>path</code> with <code>animate</code> tag, following <a href="https://css-tricks.com/guide-svg-animations-smil/" rel="nofollow noreferrer">this tutorial</a> from css tricks. I could animate path with css keyframes, and the result is this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mySvg path{    
      animation: scale-path 10s ease-in-out infinite;
  }
  
  @keyframes scale-path {
      50% {
          d: path('M1036,540L883,540L883,693Z');
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
       xmlns="http://www.w3.org/2000/svg" 
       version="1.1" 
       x="0"
       y="0"
       width="100%"
       height="100%" 
       viewBox="0 0 1920 1080" 
       preserveAspectRatio="none"&gt;
        
       &lt;path d="M1045,520L1173,558L1184,393Z"   
                fill="lightblue" 
                stroke="#eee9ea" 
                stroke-width="1.51" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But the problem is I cant achieve the same effect animation with <code>animate</code> tag (its supposed to will be there a lot of <code>path</code> tags with different animations). Im not sure if this is the correct syntax:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg id="mySvg" xmlns:svg="http://www.w3.org/2000/svg" 
       xmlns="http://www.w3.org/2000/svg" 
       version="1.1" 
       x="0"
       y="0"
       width="100%"
       height="100%" 
       viewBox="0 0 1920 1080" 
       preserveAspectRatio="none"&gt;
        
      &lt;path d="M1045,520L1173,558L1184,393Z" 
            fill="lightblue" 
            stroke="#eee9ea" 
            stroke-width="1.51"&gt;
            
              &lt;animate 
              attributeName="d"
              from="M1045, 520L1173, 558L1184, 393Z"
              to="M1036; 540L883; 540L883; 693Z" 
              dur="10s"
              repeatCount="indefinite"
              values="M1036; 540L883; 540L883; 693Z"
              keyTimes="0.5;" /&gt;
       &lt;/path&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>