動態定位SVG中的文本

我想知道是否有一種方法可以動態計算SVG中文本的位置。動態定位SVG中的文本

Problem我有兩種尺度 - 小學（只有1）和中學（1+）。

基本比例尺採用最左邊的位置在圖
二次氧化皮下一步應該到以前的規模（主要或輔助）定位
二次氧化皮只有兩個值（最小值和最大值），使他們應該相對於主尺度的頂部和底部可見。

我知道，這可以通過提供SVG text的硬編碼的X和Y座標來實現，但是可以通過操作CSS來實現。使用位置或顯示或可能是浮動屬性？

Value Scales

<svg width="100%" height="100%" viewBox="0 0 300 200" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 
    <g class="value-scales"> 
 
     <g class="primary-scale"> 
 
     <text x="5" y="20" fill="deepPink">2</text> 
 
     <text x="5" y="40" fill="deepPink">4</text> 
 
     <text x="5" y="60" fill="deepPink">6</text> 
 
     </g> 
 
     <g class="secondary-scale"> 
 
     <text x="20" y="20" fill="red">100</text> 
 
     <text x="20" y="60" fill="red">200</text> 
 
     </g> 
 
     <g class="secondary-scale"> 
 
     <text x="50" y="20" fill="blue">40</text> 
 
     <text x="50" y="60" fill="blue">160</text> 
 
     </g> 
 
</svg>

CodePen：Dyanmic Scale Positioning

來源

2014-09-23 Rohit

從你的問題來看，你不清楚你在問什麼。你究竟如何試圖定位你的文本？關於小學和中學的規模令人困惑。至少對我來說。 – 2014-09-23 16:23:06

如果要對齊的數字40和例子160上面，用text-align="right"，並從每個單元的右列測量。

對於JavaScript編碼，用getBBox()獲得邊框，並從那裏調整SVG的文本x和y值，假設你不使用text-align正確

CSS操作將是不實際，因爲在這裏，你可能需要每個單元格的CSS。

來源

2014-09-23 17:59:07

動態定位SVG中的文本

回答

相關問題