Выровнять текст текстового элемента svg без изменения позиции
Как выровнять текст в текстовом теге без использования атрибута text-anchor? Моя проблема в том, что использование text-anchor изменит способ интерпретации атрибутов x и y, а я этого не хочу, потому что я идеально настроил положение таких групп элементов:
<text>
<tspan x = "206" y = "142.2">hello</tspan>
<tspan x = "206" dy = "15">there, all good?</span>
</text>
и я не хочу, чтобы его меняли, поэтому перекодируйте всю настройку svg только для целей макета текста. Если я, например, применяю здесь text-anchor = "middle", это нормально центрирует текст, но меняет x (206) на центр текста. Я использую значение x в моем svg, чтобы разместить мой текстовый элемент в точном месте в моей системе, поэтому другие интерпретации координат x 1) нарушают весь макет и 2) даже делают невозможным точное размещение текстовых элементов, поскольку вставленные текст может иметь переменную длину, поэтому становится невозможным предсказать необходимую координату x текстового тега, чтобы разместить его в нужном месте. Итак, я подумал, что должен быть лучший способ достичь того, чего я хочу?
Вы имеете в виду выравнивание текста: по центру?
Ответы 1
Вы можете вручную центрировать текст SVG, регулируя dx каждого фрагмента текста, используя в качестве входных данных ширину, возвращаемую при вызове getComputedTextLength () для каждого фрагмента.
ouf; что вы имеете в виду, это как получить длину каждого фрагмента, затем получить наибольшую длину и центрировать остальные, применяя либо отрицательные, либо положительные значения dx, в соответствии с 0,5 * полученными различиями? Вы это имеете в виду? И вообще, как вы думаете, подходят ли SVG для рисования графиков x-y с текстовыми метками в заданном месте с заданной ориентацией + выравнивание? Кажется, нет, интересно, есть ли что-нибудь лучше, чем SVG ..
Да вот что я имею в виду. SVG очень подходит для рисования графиков x-y. Но да, текстовые метки сложно отрисовывать. Это одна из причин, по которой люди используют D3 - в котором есть много функций, которые нужны людям для диаграмм.
хорошо. Да уж, настоящая боль. Но я думаю, что ваше решение - почти единственный выход, радует брат!
извиняюсь за последующий вопрос, но вы, кажется, профессионал в svg, поэтому я подумал, почему бы не попробовать: есть ли у вас подход, который вы рекомендуете для получения каких-либо координат SVG, таких как координаты четырех прямоугольников? С этим я смогу делать все, что мне еще нужно, было бы прекрасно это знать! (Мне нужно сделать несколько вращений, поэтому возможность точно рассчитать центральную точку элементов позволит идеально вращаться; отсюда вопрос).
Мне тоже нужна поддержка IE, поэтому getBBox не подходит *
координаты любого элемента SVG *
вы используете бутстрап? возможно, с классом текстового центра