d3.js標籤裏面的路徑變形

我在路徑中成功添加了一個標籤，但是當我嘗試通過手動更改x和dy屬性來居中該標籤時。標籤在中心變形。這裏是一些圖片及其相應的代碼。之前更改x屬性，其價值135：更改x後d3.js標籤裏面的路徑變形

<svg width="1306" height="628"> 
<g> 
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path> 
</g> 
<text x="135" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
</svg>

屬性的新值是145：

<svg width="1306" height="628"> 
<g> 
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;"></path> 
</g> 
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
</svg>

來源

2016-12-27 Said Marar

沒有什麼「變形」這裏。這是預期的行爲：您使用textPath來定位文本，並且您引用的路徑會在第一個L命令中改變方向。

你可以清楚地看到，沒有什麼錯，當我們得出一些（紅）線，可見這個「彎」：

<svg width="400" height="300"> 
 
<g> 
 
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path> 
 
</g> 
 
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862" 
 
\t y2="555.2472222223878" stroke="red" transform="translate(-500,-260)" 
 
></line> 
 
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516" 
 
\t y2="527.049" stroke="red" transform="translate(-500,-260)" 
 
></line> 
 
</svg>

而且你可以看到，如果我們更好創建幾個文本，增加dy到你的價值（105）：

<svg width="400" height="300"> 
 
<g> 
 
<path name="cf40" d="M590.3383838385344,295.20151514932513L756.3916666656733,317.13308080658317L878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path> 
 
</g> 
 
<text x="145" dy="15"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<text x="145" dy="40"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<text x="145" dy="60"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<text x="145" dy="80"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
<line x1="756.3916666656733" y1="317.133080" x2="728.1939393933862" 
 
\t y2="555.2472222223878" stroke="red" transform="translate(-500,-260)" 
 
></line> 
 
<line x1="756.3916666656733" y1="317.133080" x2="822.186363636516" 
 
\t y2="527.049" stroke="red" transform="translate(-500,-260)" 
 
></line> 
 
</svg>

可能的解決方案：或者，您可以繪製曲線。這樣，文本將遵循的路徑沒有休息：

<svg width="400" height="300"> 
 
<g> 
 
<path name="cf40" d="M590.3383838385344,295.20151514932513 C 756 327,756 327, 878.5818181820214,279.5361111164093L822.186363636516,527.0494949556887L728.1939393933862,555.2472222223878Z" id="polygon2" style="fill: steelblue;" transform="translate(-500,-260)"></path> 
 
</g> 
 
<text x="145" dy="105"><textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#polygon2">CF40</textPath></text> 
 
</svg>

來源

2016-12-27 12:14:19

感謝的人，我100％的理解，我有一個問題，我怎麼能中心這個文本，而不使用BBOX方法，導致此方法不適用於香蕉形狀。 –

@SaidMarar如果你在評論中問這個問題，我是唯一一個會閱讀它的人。但是如果你把它作爲另一個問題發佈，每個人都會閱讀它。 –

d3.js標籤裏面的路徑變形

回答

相關問題