title: Fill up svg cumulatively with subsequent calculations
body: <p>I am trying to fill my svg (<em>cumulatively</em>) with additions of newly calculated quotients.</p>
  
  <p><strong>Here is a portion of my HTML:</strong></p>
  
  <pre><code>&lt;div style='text-align:center;'&gt;
      &lt;svg width="100%" viewbox="0 0 30 42"&gt;
          &lt;linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"&gt;
              &lt;stop stop-color="#61A4FF" offset="0%" id="progress"/&gt;
              &lt;stop stop-color="#FFFFFF" offset="0%" id="F1gst2"/&gt;
              &lt;!-- &lt;stop offset="0%" stop-opacity="1" stop-color="#61A4FF"/&gt;
                  &lt;animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s" begin="0s"/&gt;
              &lt;/stop&gt;
              &lt;stop offset="40%" stop-opacity="0" stop-color="#61A4FF"&gt;
                  &lt;animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="10s"  begin="0s"/&gt;
              &lt;/stop&gt; --&gt;
          &lt;/linearGradient&gt;
          &lt;path id='tear' fill="url(#lg)" stroke="black" stroke-width="1.0"
              d=" M  15 3
                  Q  16.5 6.8 25 18
                  A  12.8 12.8 0 1 1 5 18
                  Q  13.5 6.8 15 3z   " /&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And my JavaScript:</strong></p>
  
  <pre><code>function calculate(){
    var numerator = document.getElementById('progressInput').value;
    var denominator = document.getElementById('goalInput').value;
    var quotient = parseFloat(numerator)/parseFloat(denominator);
    progressFill.setAttribute('offset', quotient);
  };
  </code></pre>
  
  <p>This code basically refreshes the calculation every time I enter new values into my input fields. It's fine for it to do that the first time I calculate the quotient, but I want it to accumulate the subsequent calculations (and essentially fill up the svg area cumulatively). Is this possible?</p>
  
  <p>E.g., Let's say I first calculate parseFloat(numerator)/parseFloat(denominator) as 2/10 and the svg fills up 20% of the shape on first click. If I want to add another 40% on top of that (so parseFloat(numerator)/parseFloat(denominator) another 4/10), how do I define that as an addition to my code?</p>
  
  <p>I thought I maybe had to write an if-then statement, which I started (but I'm pretty sure it's wrong):</p>
  
  <pre><code>function calculate(){
    var numerator = document.getElementById('progressInput').value;
    var denominator = document.getElementById('goalInput').value;
    var quotient = parseFloat(numerator)/parseFloat(denominator);
    if (document.getElementById('progress').offset="0%") {
      progressFill.setAttribute('offset', quotient);
    };
  };
  </code></pre>