0

Why can't I adjust the css colour of the text in this tree? it allows me to change the text size but I can't seen to change anything like font colour or background colour

FIDDLE

.node text {
      font: 12px sans-serif;  
}
Ben Fortune
  • 31,623
  • 10
  • 79
  • 80
SaturnsEye
  • 6,297
  • 10
  • 46
  • 62

1 Answers1

2

On svg text nodes, you'll have to use fill instead of color:

.node text {
  font: 12px sans-serif; 
  fill: red;
}
<svg width="960" height="500">
  <g transform="translate(100,20)">
    <g class="node" transform="translate(0,10)">
      <text x="-13" dy=".35em" text-anchor="end" style="fill-opacity: 1;">Product</text>
    </g>
  </g>
</svg>

Fiddle

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
  • Oh brilliant! I didn't know this. What would be the equivalent of background colour? – SaturnsEye Jul 13 '15 at 08:26
  • I'm afraid there's no css background attribute for those elements. This question has some alternatives: http://stackoverflow.com/questions/15500894/background-color-of-text-in-svg – Cerbrus Jul 13 '15 at 08:27