title: SVG: why does external css override inline style for text?
body: <p>I'm playing with using an SVG gradientFill as a way to visually 'truncate' long text strings in a d3.js chart.</p>
  
  <p>It seems that an external css style for fill will override the inline gradient fill style in the SVG... is that always the case?  How can I enforce that gradient fill?</p>
  
  <p>In this test case I've defined a linear gradient in the svg defs, and then apply the gradient fill to two groups of text. <a href="http://jsfiddle.net/rolfsf/uX2kH/3/">http://jsfiddle.net/rolfsf/uX2kH/3/</a></p>
  
  <pre><code>var labelColWidth = 200;
  var svg =  d3.select('#test').append('svg')
              .attr('width', 500)
              .attr('height', 500);
  
  var defs = svg.append('svg:defs');
  
  var textgradient = defs.append('svg:linearGradient')
              .attr('gradientUnits', 'userSpaceOnUse')
              .attr('x1', 0).attr('y1', 0).attr('x2', 40).attr('y2', 0)
              .attr('id', 'theGradient')
              .attr('gradientTransform',  'translate(' + (labelColWidth - 40) + ')');
  
      textgradient.append('svg:stop').attr('offset', '0%').attr('style', 'stop-color:rgb(0,0,0);stop-opacity:1')
      textgradient.append('svg:stop').attr('offset', '100%').attr('style', 'stop-color:rgb(0,0,0);stop-opacity:0');
  
  
  var data = [[0, "xyzzy xyzzy"], [1, "xyzzy xyzzy xyzzy xyzzy xyzzy"], [2, "xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy"], [3, "xyzzy xyzzy xyzzy"], [4, "xyzzy xyzzy"], [5, "xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy xyzzy"]];
  
  var testGroup = svg.append('g')
      .attr('transform',  'translate(50, 100)');
  
  var testGroup2 = svg.append('g')
      .attr('transform',  'translate(50, 250)')
      .attr('class', 'group2');
  
  testGroup.selectAll('text').data(data)
    .enter().append('svg:text')
    .attr('fill', 'url(#theGradient)')
    .attr('x', 0)
    .attr('y', function(d, i) { return (i+1) * 20; })
    .text(function(d, i) { return d[1]; });
  
  testGroup2.selectAll('text').data(data)
    .enter().append('svg:text')
    .attr('fill', 'url(#theGradient)')
    .attr('x', 0)
    .attr('y', function(d, i) { return (i+1) * 20; })
    .text(function(d, i) { return d[1]; });
  </code></pre>
  
  <p>then in CSS, I define a fill for .group2 text</p>
  
  <pre><code>.group2 text {
      fill: #000;
  }
  </code></pre>
  
  <p>the first group has the gradient fill, the second group does not. </p>
  
  <p><strong>Shouldn't the inline style take precedence?</strong> </p>
  
  <p>Thanks!</p>