SVG 文本元素 text-anchor="middle" 在 Firefox 中不起作用答案

【问题标题】：SVG text element text-anchor="middle" not working in FirefoxSVG 文本元素 text-anchor="middle" 在 Firefox 中不起作用
【发布时间】：2013-02-13 15:28:39
【问题描述】：

我正在使用 D3 创建条形图，我想将文本标签与条形的中间对齐。我正在使用 text-anchor 属性并将其设置为“中间”。这在 Chrome 中运行良好，但在 Firefox 中对齐方式很差。我将矩形和文本分组到单独的父 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>

我不知道是什么导致了这个问题。有人可以帮我解决问题吗？

谢谢！

【问题讨论】：

标签： firefox text svg d3.js

【解决方案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>

【讨论】：

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

【解决方案2】：

当你应该使用 x 和 y 时，你正在使用 dx 和 dy 来定位文本

【讨论】：