title: Dynamically adding a SVG gradient
body: <p>I have this SVG container with paths. I want to edit it, so the paths' fill will be a pattern. This is my failed attempt:</p>
  
  <p>I add a gradient:</p>
  
  <pre><code>$('svg defs').prepend('&lt;linearGradient id="MyGradient"&gt;&lt;stop offset="5%" stop-color="#F60" /&gt;&lt;stop offset="95%" stop-color="#FF6" /&gt;&lt;/linearGradient&gt;');
  </code></pre>
  
  <p>And then change the paths' fill:</p>
  
  <pre><code>$(base + ' svg path').each(function() {
      this.setAttribute('fill','url(#MyGradient)')
  }
  </code></pre>
  
  <p>This doesn't work. What am I missing?</p>