Удалить пустое пространство из файла SVG - PullRequest
Новая
       87

Удалить пустое пространство из файла SVG

0 голосов
/ 27 мая 2020

Я загрузил более 200 страниц данных в виде файла SVG. Проблема в том, что в большинстве файлов SVG не используется пустое пространство, поэтому рисунок очень маленький. Есть ли способ удалить все эти пробелы сразу и распечатать файлы SVG полностью?

Заранее спасибо

Вы можете найти один из кодов здесь: pastebin.com/ raw / EJFUuv5A это один из файлов SVG, но у меня их гораздо больше. Я попытался использовать inkspace для удаления пробелов, но он не работает со всеми моими файлами SVG. Я также пробовал использовать github SVGOMG, но это займет целую вечность, чтобы делать это один за другим. Я попытался использовать макрос для сайта минификатора SVG, но после нескольких попыток сайт вылетел.

1 Ответ

1 голос
/ 27 мая 2020

Я надеюсь, что все ваши элементы svg построены одинаково.

В этом случае все рисунки внутри элемента svg заключены в группу <g>. Это очень полезно, потому что вы можете получить ограничивающую рамку группы и использовать ее для построения значения атрибута viewBox 

// get the svg element. In this case I am using querySelector but if you have several svg elements you may need to use `querySelectorAll` and then loop
let svg = document.querySelector("svg");
// remove the attributes width and height of the svg element because I want to avoid a different aspect ratio
svg.removeAttribute("width");
svg.removeAttribute("height");
// get the wrapping group. This is assuming that there is a group wrapping everighing in the svg element
let g = document.querySelector("g");
// remove the transform attribute that is translating the group. This is assuming that the transform is not rotating or skewing the group
g.removeAttribute("transform");
// get the position (x,y) and the size (width,height) of the bounding box of the group
let bb = g.getBBox();
// use the bounding box of the group to build the viewBox attribute of the svg element
svg.setAttributeNS(null, `viewBox`, `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
...