Вычисление параметров viewBox на основе элементов пути в SVG

Question

Я получаю только XML или JSON с путями, и мне нужно воссоздать образ SVG.

Я создаю пустой

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>,

добавить <g transform="scale(1 -1)" fill='#aaa' stroke='black' stroke-width='5' ></g> в ней, а затем в этом элементе я добавляю все пути в ней (например, <path d= ... />).

В конце я получаю изображение SVG, но поскольку я не установил атрибут viewBox в элементе SVG, изображение не отображается должным образом - когда я открываю его в браузере, его часть отображается в полном размере ,

Может ли viewBox рассчитываться по значениям из путей?

Спасибо!

Answer 1

ОК, так что я решил его следующим образом:

1. удалены все буквы из строки путей и сделал массив из него с

   var values = pathValue.split('L').join(' ').split('M').join(' ').split('z').join('').split(' ');

2. нашел макс и мин от эти значения:

   var max = Math.max.apply(Math, values);

   var min = Math.min.apply(Math, values);

3. установить Viewbox:

   Viewbox = макс мин макс макс

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

Answer 2

Подобного ответ Мартина Spa, но лучший способ сделать получить максимальную область видового экрана с помощью функции getBBox:

var clientrect = path.getBBox(); 
var viewBox = clientrect.x+' '+clientrect.y+' '+clientrect.width+' '+clientrect.height; 

Вы можете установить ViewBox к этим координатам.

n.b. Я думаю, вы можете изменить окно просмотра svg после его рендеринга, чтобы вам пришлось повторно отобразить svg.