title: Changing a line dimensions in svg with jquery
body: <p>I have this svg that draws a simple line:</p>
  
  <pre><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       width="80px" height="100px" viewBox="0 0 80 589" enable-background="new 0 0 80 589" xml:space="preserve"&gt;
  
   &lt;line fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" x1="0" y1="0" x2="1000" y2="1500"/&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>I want to be able to change x1, y1, x2, and x1 as a function of  the scroll position for a website. I'm stuck because I've only been able to alter css attributes, and these are not. </p>
  
  <p>I was trying something along these lines:</p>
  
  <pre><code>$(window).scroll(function() {
      //calculate how far down the page the user is 
      var $percentageComplete = (($(window).scrollTop() / ($("html").height() - $(window).height())) * 100);
      var svgContainer = d3.select("body").append("svg")
        .attr("width", 200)
        .attr("height", 200);
  
      var line = svgContainer.append("line")
        .attr("x1", 15)
        .attr("y1", '' + $percentageComplete + '')
        .attr("x2", 30)
        .attr("y2", 20);
      document.getElementById("currentValue").innerHTML = $percentageComplete;
  
    });
    console.log("Ready");
  });
  </code></pre>
  
  <p>This didn't work, I was able to make the scroll going and change a value as I went on the site, but I'm a little stuck when wanting to make the coordinates of the line as a function of the scroll.</p>
  
  <p>Thanks.</p>