SVG文本元素的text-anchor="middle"在Firefox中无法正常工作

Question

我正在使用D3创建一个柱状图，我想将文本标签对齐到柱子的中央。我使用了text-anchor属性，并将其设置为“middle”。这在Chrome中效果很好，但在Firefox中对齐方式完全偏离了。我把rects和text分别分组在不同的父级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>

我不知道可能是什么原因导致了问题。请有人帮助我进行故障排除吗？

谢谢！

- user2116164

Answer 1

我认为您应该使用“x”而不是“dx”来放置标签。您想要文本位于该x位置并以中心为锚定点。我认为dx的作用是从锚定位置偏移。

同样，您可能需要使用“y”而不是“dy”。使用dy来调整基线上方或下方的高度（通常以“em”为单位），而使用y来实际定位文本。

尝试：

<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;" x="96.25" y="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;" x="96.25" y="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;" x="96px" y="88.50602409638549">74%</text></g>
  </g>
 </g>
</svg>

- Superboggly

---

谢谢！使用“x”和“y”代替“dx”和“dy”解决了问题。 - user2116164

Answer 2

你应该使用 x 和 y 来定位文本，而不是使用 dx 和 dy

- Robert Longson