Динамическое позиционирование текста в SVG

Question

Мне интересно, есть ли способ динамически рассчитать положение текста в SVG.

Problem У меня есть два типа весов - первичный (только 1) и вторичный (1+).

• Primary Scale занимает самое левое место в графике
• Вторичной шкала должна быть расположена рядом с предыдущей шкалой (первичной или вторичной)
• Вторичной шкала имеет только два значения (Min и Max), чтобы они должны быть видны относительно верхней и нижней части первичной шкалы.

Я знаю, это можно сработать, предоставляя жестко закодированные координаты X и Y SVG text, но возможно ли это с помощью манипуляции с CSS, например. используя свойство Position или Display или Float?

<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

Answer 1

Если вы хотите, чтобы выровнять число 40 и 160 в приведенном выше примере, используйте text-align="right" и измерения в правой колонке каждой ячейки.

Для кодирования Javascript, используйте getBBox(), чтобы получить рамку и оттуда корректировать текст x SVG и y значения, если вы не используете text-align правильно

CSS манипуляция не будет практичным здесь, так как вам может понадобиться CSS для каждой ячейки.