Как выставить размеры SVG автоматически?

Question

[Максим]

Есть некий SVG и внутри него есть не определённое количество элементов, я хочу что бы width и height и так же viewBox высчитывался относительно содержимого то есть другими словами все элементы внутри должны быть видны и для этого я стал высчитывать его количество и размеры вот так ...



Но очевидно что я чего то не знаю ...

Где то я не правильно считаю размеры или вообще их не считаю ...

Как это делается правильно ?

Вопрос не несёт ни какого коммерческого смысла и не имеет денежной ноты ..только в целях образования

Answer 1

[RAX7]

Если есть возможность отредактировать svg, то можно обернуть все содержимое в тег <g></g> и для него вызвать метод getBBox, полученные значения можно использовать как viewBox

Альтернативный способ: суммировать BoundingBoxы всех элементов в svg, уже предложили на другом форуме.

Comments

[Максим]

подглядел javascript.ru ? но stroke всё равно обрезало

[RAX7]

Много Чего, нет, просто почитал коменты к предыдущему ответу=) да stoke обрезает, но как решить это простым способом я не знаю. В метод getBBox можно передать доп. опции object.getBBox({stroke: true}) и в этом случае он должен учитывать размеры обводки, но в хроме это не работает (и не знаю сработает ли в других браузерах).

[Максим]

RAX7, есть какое то свойство - на подобие box-sizing но в svg - я когда рисовал ещё в inkscape он всегда ставил по умолчанию это свойство - для шрифта и для обводки - и самое что хренова что я забыл его ...это свойство рисует обводку как при box-sizing то есть как бы учитывает что есть обводка ..я спрашивал и Сару Сауэдан ...но она меня уверила что такого в svg не существует ...

[RAX7]

Много Чего, ну это можно выяснить опытным путем, поставить inkscape и посмотреть что он сгенерирует на выхлопе. Я такого чудесного свойства не знаю.

[Максим]

RAX7, я ставил - svg же обновился v2 - и такого свойства уже нету - хренова

[RAX7]

Много Чего, но можно же поставить старую версию inkscape и посмотреть что было раньше.

[Максим]

RAX7, я даже не знал что так можно :)) но я проверю