title: What is the difference of SVG's additive="sum" between duration
body: <p><strong>The difference of the following code?</strong></p>
  
  <p>Why the result is different from?</p>
  
  <p>I thought it was the same.</p>
  
  <h2>However, different results when the cell actually animation.</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="1000" height="1000"&gt;
    &lt;circle cx="10" cy="10" r="10"&gt;
      &lt;animate
         attributeType="XML" attributeName="cx"
         dur="10s" values="100; 200; 100"
         repeatCount="indefinite" /&gt;
      &lt;animate
         attributeType="XML" attributeName="cx"
         dur="10s" values="0; 300; 0"
         repeatCount="indefinite" additive="sum" /&gt;
    &lt;/circle&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="1000" height="1000"&gt;
        &lt;circle cx="10" cy="10" r="10"&gt;
          &lt;animate
             attributeType="XML" attributeName="cx"
             dur="19s" values="100; 200; 100"
             repeatCount="indefinite" /&gt;
          &lt;animate
             attributeType="XML" attributeName="cx"
             dur="1s" values="0; 300; 0"
             repeatCount="indefinite" additive="sum" /&gt;
        &lt;/circle&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>