title: Linear gradient not applying in Webkit with d3 generated SVG
body: <p>I'm creating a specific implementation for a d3.js graph, and it seems that when creating an SVG document dynamically, <code>linearGradient</code>s are not working on Webkit browsers (tested only on Chrome, of the Webkit family), while Gecko is showing the expected behavior.</p>
  
  <p>How do I conclude it has to do with dynamic generation, or d3? I tried copying the resulted document into an empty page, and the gradient came to life.</p>
  
  <p>The d3 code initializes the document first:</p>
  
  <pre class="lang-js prettyprint-override"><code>// in construction:
  // ...
  svg = d3.select(el)
      .append('svg:svg')
      .attr('width', width)
      .attr('height', height),
  defs = svg.append('svg:defs'),
  linearGradient1 = defs.append('svg:linearGradient')
      .attr('id', 'linear-gradient-1')
      .attr('x1', 0)
      .attr('y1', 1)
      .attr('x2', 6.123233995736766e-17)
      .attr('y2', 0),
  linearGradient1Stop1 = linearGradient1.append('svg:stop')
      .attr('offset', '0%')
      .attr('stop-color', '#e3e5e8'),
      // several other stops here ...
  </code></pre>
  
  <p>&hellip; than refreshes the renderer, e.g. after adding "nodes" to the graph data struct, on demand (<em>note: <code>selfRef.node</code> is simply a handle to the d3 selector of all the nodes</em>):</p>
  
  <pre class="lang-js prettyprint-override"><code>// called e.g. when adding new nodes:
  refresh: function() {
      // ...
      // add new nodes
      var g = selfRef.node.enter().append('svg:g').attr('class', 'node');
  
      g.append('svg:rect')
          .attr('width', 144)
          .attr('height', 42)
          .attr('rx', 3)
          .attr('ry', 3)
          .attr('fill', 'url(#linear-gradient-1)')
          .style('stroke', '#4d4d4d')
          .style('stroke-width', 1)
  
      // ...
  }
  </code></pre>
  
  <p>Here's the generated document, it's nothing special:</p>
  
  <pre class="lang-svg prettyprint-override"><code>&lt;svg width="1889" height="400"&gt;
      &lt;defs&gt;
          &lt;linearGradient id="linear-gradient-1" x1="0" y1="1" x2="6.123233995736766e-17" y2="0"&gt;
              &lt;stop offset="0%" stop-color="#e3e5e8"&gt;&lt;/stop&gt;
              &lt;stop offset="11%" stop-color="#e6e8ec"&gt;&lt;/stop&gt;
              &lt;stop offset="59%" stop-color="#eff2fa"&gt;&lt;/stop&gt;
              &lt;stop offset="100%" stop-opacity="0.6" stop-color="#f2f6ff"&gt;&lt;/stop&gt;
          &lt;/linearGradient&gt;
      &lt;/defs&gt;
      &lt;g&gt;
          &lt;g class="node" 
             transform="translate(1113.425033222223,312.1412317958371)"&gt;
              &lt;rect width="144" height="42" rx="3" ry="3" 
                    fill="url(#linear-gradient-1)" 
                    style="stroke: #4d4d4d; stroke-width: 1px;"&gt;&lt;/rect&gt;
              &lt;!-- some other shapes of the node... --&gt;
          &lt;/g&gt;
          &lt;!-- etc. etc., some more node groups here... --&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <h3>Things I have tried</h3>
  
  <ul>
  <li>Pulling the element referencing the gradient outside any group.</li>
  <li>Adding <code>version</code> declaration to the SVG with varying values (maybe it only appears on 1.1?)</li>
  <li>Wrapping the reference in quotes (i.e. <code>fill="url('#linear-gradient-1')"</code>) or omitting the dashes from the id, thinking Webkit is less lenient here.</li>
  </ul>
  
  <h3>Note</h3>
  
  <p><a href="https://stackoverflow.com/a/10888114/547020">Robert Longson mentioned that case matters in this post</a>, and, weird enough, it seems that when pasting the document in an empty page (in the Chrome's dev-tools), the linear gradient element transforms to camel-case format (though it doesn't show in the DOM view, all is lowercase there). I discovered this after <a href="http://www.mergely.com/TbgwrM3n/" rel="nofollow noreferrer">diffing</a> the results of my d3 generated code and the pasted static document. What's up with that?</p>
  
  <hr>
  
  <h3>TL;DR</h3>
  
  <p>How come generating dynamic SVG gradients don't work when running in Chrome, and how to fix this?</p>