我正在使用D3来创建条形图,我想将文本标签对齐到条形图的中间.我正在使用text-anchor属性并将其设置为"middle".这在Chrome中运行良好,但在Firefox中的对齐方式已经过时了.我将rects和text分组在单独的parent g元素中,以便在数据更改时实现一堆不同的转换效果(例如,分割条形图).
这是我的SVG:
<svg width="650" height="400">
<g class="groups" transform="translate(25,0)">
<g class="group" transform="translate(0,0)">
<g class="bar"><rect class="subBar" x="0" y="60" width="192" height="310"/></g>
<g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" dx="96.25" dy="55">83%</text></g>
</g>
<g class="group" transform="translate(207.5,0)">
<g class="bar"><rect class="subBar" x="0" y="97.22891566265059" width="192" height="272.7710843373494"/></g>
<g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" dx="96.25" dy="92.22891566265059">73%</text></g>
</g>
<g class="group" transform="translate(415,0)">
<g class="bar"><rect class="subBar" x="0" y="93.50602409638549" width="192" height="276.4939759036145"/></g>
<g class="dataLabel"><text text-anchor="middle" class="subLabel" style="font-size: 14px; opacity: 1;" dx="96.25" dy="88.50602409638549">74%</text></g>
</g>
</g>
</svg>
我不知道可能导致这个问题的原因.有人可以帮我解决问题吗？
谢谢!