title: Manipulate SVG path length with jQuery
body: <p>How can I adjust the length of the blue line (atm 100%) to 70%?</p>
  
  <p><strong>Fiddle</strong>
  <a href="http://jsfiddle.net/7FP3J/2/" rel="nofollow">http://jsfiddle.net/7FP3J/2/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="p0"&gt;0%&lt;/div&gt;
  &lt;div id="p100"&gt;100%&lt;/div&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; 
      &lt;path fill="none" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" stroke="#0074c4" d="M80,80 A80,80 0 1,180.61117636732928,100.45116865416591" stroke-width="3" id="test"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#p0 {
    color: #0074c4;
    left: 60px;
    position: absolute;
    top: 72px;
  }
  #p100 {
    color: #0074c4;
    left: 240px;
    position: absolute;
    top: 144px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>setCircleTo(70);
  
  function setCircleTo(percent)
  {
      // percent   
      // $('#test').attr('d','') 
  }
  </code></pre>