title: How to add a path with 'd' attributes to a svg dynamically
body: <p>I'm having a problem dynamically generating path elements inside an empty svg with javascript. I'm not interested in using third-party libraries, I'd like to understand how it works in vanilla javascript. For the following <a href="http://codepen.io/anon/pen/bdJgrd" rel="nofollow">codepen</a>, I'm using jQuery for simplicity's sake.</p>
  
  <p>here is the javascript for those not interested in visiting the codepen link:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    function calculateX(degrees, radius) {
      var radians = Math.PI * degrees / 180;
      return Math.ceil(radius + (radius * Math.cos(radians)));
    }
  
    function calculateY(degrees, radius) {
      var radians = Math.PI * degrees / 180;
      return Math.ceil(radius + (radius * Math.sin(radians)));
    }
    var d, opacity, len = 6,
      path, endAngle, degrees = 360 / len,
      startAngle = 270;
    for (var i = 0; i &lt; len; i++) {
      opacity = 'rgba(255,0,0,' +parseFloat((i / len).toPrecision(2)) + ')';
      endAngle = (startAngle + degrees) % 360;
      d = 'M100 100 L' + calculateX(startAngle, 100) + ' ' +
        calculateY(startAngle, 100) + ' A100 100 0 0 1 ' +
        calculateX(endAngle, 100) + ' ' +
        calculateY(endAngle, 100) + ' Z';
      path = $('&lt;path&gt;').appendTo('svg');
      path.css({'background': opacity, 'fill': opacity});
      path[0].setAttribute('d', d);
      startAngle = endAngle;
    }
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I cut and paste the generated html from the developer console into the html section of the codepen, the result is exactly what I want, so I think my d attributes are being generated correctly, it just seems the DOM is not being updated properly or needs some sort of signal to redraw the svg?</p>
  
  <p>here is the html fragment that is generated:</p>
  
  <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 viewBox="0 0 200 200"&gt;&lt;path d="M100 100 L100 0 A100 100 0 0 1 187 50 Z" style="fill: rgba(255, 0, 0, 0); background: rgba(255, 0, 0, 0);"&gt;&lt;/path&gt;&lt;path d="M100 100 L187 50 A100 100 0 0 1 187 150 Z" style="fill: rgba(255, 0, 0, 0.168627); background: rgba(255, 0, 0, 0.168627);"&gt;&lt;/path&gt;&lt;path d="M100 100 L187 150 A100 100 0 0 1 100 200 Z" style="fill: rgba(255, 0, 0, 0.329412); background: rgba(255, 0, 0, 0.329412);"&gt;&lt;/path&gt;&lt;path d="M100 100 L100 200 A100 100 0 0 1 14 150 Z" style="fill: rgba(255, 0, 0, 0.498039); background: rgba(255, 0, 0, 0.498039);"&gt;&lt;/path&gt;&lt;path d="M100 100 L14 150 A100 100 0 0 1 14 50 Z" style="fill: rgba(255, 0, 0, 0.670588); background: rgba(255, 0, 0, 0.670588);"&gt;&lt;/path&gt;&lt;path d="M100 100 L14 50 A100 100 0 0 1 100 0 Z" style="fill: rgba(255, 0, 0, 0.831373); background: rgba(255, 0, 0, 0.831373);"&gt;&lt;/path&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>