0

Создаю SVG на лету. Необходимо, чтобы всё отобразилось. Сейчас я просто беру и подставляю подогнаные значения в viewBox, так как не могу рассчитать ширину и высоту текста. Знаю, что если его отрисовать, то можно получить высоту и ширину блока через clientWidth и clientHeight. А как расчитать зная ширину и высоту текстового блока иначе зная шрифт, его размер и регистр?

6
  • проще всего - отрендерить и взять ширину =), как Вы уже умеете делать, что Вас не устраивает в этом подходе? 26 окт 2019 в 9:21
  • @StrangerintheQ Как это скажется на производительности? Ведь рендеринг самая тяжелая операция. И является ли в вашей практикой это нормой? Или это больше костыль?
    – doox911
    26 окт 2019 в 9:25
  • ну так вы же и так и так его рендерить будете, я не понимаю что Вас смущает 26 окт 2019 в 9:26
  • @StrangerintheQ рендерить уже готовый
    – doox911
    26 окт 2019 в 9:27
  • Я предпочитаю чтобы код был простым, и не страдаю преждевремнными оптимизациями, что касается этого случая - это разовая операция, пусть хоть секунду занимает, какая разница? 26 окт 2019 в 9:31

1 ответ 1

1

Вам и так и так придется его отрисовать, один раз сменить bbox - считайте что еще один кадр анимации нарисовать.

Предлагаю отрендерить и узнать размер, сделать это можно при помощи метода getBBox

При этом кода ровно одна 2 строчки, а как посчитать размер другим способом - боюсь предположить сколько это будет кода и насколько точен будет результат.

let b = txt.getBBox();
svg.setAttribute('viewBox', [b.x, b.y, b.width, b.height]);
<svg id=svg>
  <text id=txt>hello</text> 
</svg>

3
  • +1, но не приму, так как хочется без отрисовки)
    – doox911
    26 окт 2019 в 9:42
  • Просто в моём случае, с вашим подходом мне придётся парсить атрибут viewBox. Это конечно понты, но уже смахивает на форшмачёк)
    – doox911
    26 окт 2019 в 9:45
  • @doox911 объясните подробнее, не понимаю в чем проблема 26 окт 2019 в 9:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.