为什么我的svg里面的<text>没有显示</text>

时间:2015-04-10 06:32:25

标签: css svg d3.js

我在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代码无关。

请帮助!!!

1 个答案:

答案 0 :(得分:2)

fill: white; #someChart text就是这样做的。改变颜色,它应该工作。

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