css - imagen - insertar svg en html

SVG: ¿por qué el CSS externo anula el estilo en línea para el texto?

Question

Estoy jugando con el uso de un degradado SVGFill como una forma de ''truncar'' visualmente cadenas de texto largas en un gráfico d3.js.

Parece que un estilo css externo para relleno anulará el estilo de relleno degradado en línea en el SVG ... ¿es siempre el caso? ¿Cómo puedo hacer cumplir ese relleno de gradiente?

En este caso de prueba, he definido un degradado lineal en svg defs, y luego aplico el relleno de degradado a dos grupos de texto. 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]; });

luego en CSS, defino un relleno para el texto .group2

.group2 text {
    fill: #000;
}

el primer grupo tiene el relleno de degradado, el segundo grupo no.

¿No debería el estilo en línea tener prioridad?

¡Gracias!

Answer 1

De la especificación SVG

Para los agentes de usuario que admiten CSS, los atributos de la presentación deben traducirse a las reglas de estilo CSS correspondientes de acuerdo con las reglas descritas en Precedencia de sugerencias de presentación no CSS ([CSS2], sección 6.4.4), con la aclaración adicional de que los atributos de presentación son insertado conceptualmente en una nueva hoja de estilo de autor que es la primera en la colección de hojas de estilo del autor. Por lo tanto, los atributos de la presentación participarán en la cascada de CSS2 como si fueran reemplazados por las reglas de estilo de CSS correspondientes colocadas al principio de la hoja de estilo de autor con una especificidad de cero. En general, esto significa que los atributos de presentación tienen una prioridad menor que otras reglas de estilo CSS especificadas en hojas de estilo de autor o atributos de "estilo".

Por lo tanto, podría usar un estilo en línea en lugar de un atributo de presentación, por ejemplo

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

Answer 2

En mi caso, fue tan simple como reemplazar attr con style en la cadena d3:

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

Answer 3

Porque en SVG, al igual que el HTML anterior, los estilos prevalecen en el estilo de los atributos.

fill="red" continuación NO es un "estilo en línea", style="fill:green" ES un estilo en línea.

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

Del mismo modo, si tienes un estilo definido en el exterior, ganará.

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

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