Создаю SVG
на лету. Необходимо, чтобы всё отобразилось. Сейчас я просто беру и подставляю подогнаные значения в viewBox
, так как не могу рассчитать ширину и высоту текста. Знаю, что если его отрисовать, то можно получить высоту и ширину блока через clientWidth
и clientHeight
. А как расчитать зная ширину и высоту текстового блока иначе зная шрифт, его размер и регистр?
-
проще всего - отрендерить и взять ширину =), как Вы уже умеете делать, что Вас не устраивает в этом подходе?– Stranger in the Q26 окт 2019 в 9:21
-
@StrangerintheQ Как это скажется на производительности? Ведь рендеринг самая тяжелая операция. И является ли в вашей практикой это нормой? Или это больше костыль?– doox91126 окт 2019 в 9:25
-
ну так вы же и так и так его рендерить будете, я не понимаю что Вас смущает– Stranger in the Q26 окт 2019 в 9:26
-
@StrangerintheQ рендерить уже готовый– doox91126 окт 2019 в 9:27
-
Я предпочитаю чтобы код был простым, и не страдаю преждевремнными оптимизациями, что касается этого случая - это разовая операция, пусть хоть секунду занимает, какая разница?– Stranger in the Q26 окт 2019 в 9:31
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>
-
-
Просто в моём случае, с вашим подходом мне придётся парсить атрибут
viewBox
. Это конечно понты, но уже смахивает на форшмачёк)– doox91126 окт 2019 в 9:45 -