SVG: Warum überschreibt externe CSS Inline-Stil für Text?

Question

Ich spiele mit einem SVG gradientFill als eine Möglichkeit, lange Textzeichenfolgen in einem d3.js Diagramm visuell zu trunkieren.

Es scheint, dass ein externer CSS-Stil für Fill den Inline-Gradientenfüllstil im SVG überschreibt ... ist das immer der Fall? Wie kann ich diese Farbverlaufsfüllung erzwingen?

In diesem Testfall habe ich einen linearen Farbverlauf in den SVG-Definitionen definiert und dann die Farbverlaufsfüllung auf zwei Textgruppen angewendet. http://jsfiddle.net/rolfsf/uX2kH/3/

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]; }); 

dann in CSS, I eine Füllung für .group2 Text

.group2 text { 
    fill: #000; 
} 

die erste Gruppe die graduelle Füllung definieren hat, hat die zweite Gruppe nicht.

Sollte nicht der Inline-Stil Vorrang haben?

Vielen Dank!

Answer 1

Da in SVG, wie HTML davor, Stile Stilattribut trump.

fill="red" unten ist NICHT ein "Inline-Stil", style="fill:green"IS ein Inline-Stil.

<svg width="400" height="400"> 
 
    <text x="50" y="50" fill="red" style="fill:green">This will be green</text> 
 
</svg>

Wie weise, wenn Sie einen Stil außerhalb definiert haben, wird es gewinnen.

<style> 
 
    text { fill: lime; } 
 
</style>

<svg width="300" height="300"> 
 
    <text x="50" y="40" fill="red">This will be lime</text> 
 
</svg>

Answer 2

Vom SVG specification

Für User-Agents, die CSS unterstützen, müssen die Präsentation Attribute mit den entsprechenden Regeln CSS Stil nach den Regeln in Präzedenz von nicht-CSS beschrieben übersetzt werden Präsentationshinweise ([CSS2], Abschnitt 6.4.4), mit der zusätzlichen Klarstellung, dass die Präsentationsattribute konzeptuell in ein neues Autoren-Stylesheet eingefügt werden, welches das erste im Autorenstil ist et Sammlung. Die Präsentationsattribute werden somit an der CSS2-Kaskade teilnehmen, als ob sie durch entsprechende CSS-Stilregeln ersetzt würden, die am Anfang des Stylesheets des Autors mit einer Spezifität von Null platziert sind. Im Allgemeinen bedeutet dies, dass die Präsentationsattribute eine niedrigere Priorität haben als andere CSS-Stilregeln, die in Stylesheets oder Stilattributen angegeben sind.

Sie könnten also einen Inline-Stil anstelle eines Präsentationsattributs verwenden, z.

.attr('style', 'fill : url(#theGradient)') 

Answer 3

In meinem Fall war es so einfach wie attr mit style in der d3-Kette ersetzt:

.style('stroke', 'url(#gradient--min)')