在Firefox中不工作的SVG文本元素text-anchor =「middle」

我使用D3創建條形圖，並且希望將文本標籤對齊到條形中間。我正在使用文本定位屬性並將其設置爲「中間」。這在Chrome中運行良好，但是Firefox中的對齊方式不同。爲了在數據更改時實現一堆不同的轉換效果（例如分割條），我將rects和文本分組到單獨的父g元素中。在Firefox中不工作的SVG文本元素text-anchor =「middle」

這裏是我的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>

我不知道這可能是導致該問題。有人可以幫我解決問題嗎？

謝謝！

來源

2013-02-27 user2116164

我想你應該使用「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>

來源

2013-02-27 18:18:48 Superboggly

謝謝定位文本！用「x」和「y」代替「dx」和「dy」解決了這個問題。 – user2116164 2013-02-27 20:18:54

您使用dx和dy時，你應該使用x和y

來源

2013-02-27 19:06:51

謝謝，使用x和y來解決對齊問題。 – user2116164 2013-02-27 20:21:16

在Firefox中不工作的SVG文本元素text-anchor =「middle」

回答

相關問題