Почему <text> внутри моего SVG не отображается

Question

У меня есть гистограмму с помощью текстового элемента внутри SVG, как показано на скрипку: http://jsfiddle.net/447dpk2o/

<svg id="someChart" width="1000" height="300" data-reactid=".0.1.0" style="background-color: aliceblue;"> 
<text id="charDisplay" x="50" y="50" style="">My TEXT 
</text> 
<rect class="bar" x="0" width="31" y="270" height="30"></rect> 
<rect class="bar" x="35" width="31" y="285" height="15"></rect> 
<rect class="bar" x="70" width="31" y="285" height="15"></rect> 
<rect class="bar" x="105" width="31" y="240" height="60"></rect> 
<rect class="bar" x="140" width="31" y="255" height="45"></rect> 
<rect class="bar" x="175" width="31" y="270" height="30"></rect> 
<rect class="bar" x="210" width="31" y="285" height="15"></rect> 
<rect class="bar" x="245" width="31" y="285" height="15"></rect> 
<rect class="bar" x="280" width="31" y="285" height="15"></rect> 
<rect class="bar" x="315" width="31" y="270" height="30"></rect> 

Мой текст не отображается в все. Я не знаю, почему. Я мало нового для SVG, кроме того, эти элементы были созданы с использованием d3. Но я уверен, что это не имеет никакого отношения к моему коду d3.

Пожалуйста, помогите !!!

Answer 1

Это fill: white; на #someChart text, который делает это. Измените цвет и он должен работать.

#someChart text { 
    fill: black; /*Changed from white */ 
    font: 10px sans-serif; 
    text-anchor: middle; 
}