Как определить ширину / высоту svg-sprite и записать эти значения в файл (в Linux или Mac CLI) - PullRequest
Новая
       48

Как определить ширину / высоту svg-sprite и записать эти значения в файл (в Linux или Mac CLI)

0 голосов
/ 14 февраля 2019

Я пытаюсь создать svg-sprite, используя пакет npm svg-sprite .В конце концов я получаю спрайт, который выглядит так: 

// icons-test.svg
...
<svg viewBox="0 0 108 54" ...>
  <svg height="54" width="54" viewBox="-2 -2 54 54" ...>
    <path d="...”>
   </svg>
  <svg height="54" width="54" viewBox="-2 -2 54 54" ...>
    <path d="...”>
  </svg>
</svg>

Чтобы определить размер (например, ширину) этого svg-спрайта, я использую команду , идентифицирующую из util ImageMagick .

identify -format '%w' icons-test.svg

или запишите его в файл 

echo "\$spriteWidth = $(identify -format ‘%w’ icons-test.svg)px" >> styles.styl

Проблема в в том, что в файле я не получаю ширину полного svg-sprite (108), но только ширина последнего вспомогательного svg-изображения (54), включенного в общий svg-sprite.

Скажите, пожалуйста, где моя ошибка?Как заставить идентифицировать вернуть правильную ширину.Или посоветуйте мне другие варианты решения проблемы.

1 Ответ

0 голосов
/ 14 февраля 2019

Я подозреваю, что вложенные теги svg сбивают с толку внутренний SVG-декодер ImageMagick.Попробуйте конвертировать SVG в MVG.Он должен выбросить вложенную структуру SVG. 

$ convert icons-test.svg mvg:-

, которая будет печатать следующие инструкции MVG. 

push graphic-context
viewbox 0 0 108 54
affine 1 0 0 1 0 0
push graphic-context
viewbox 0 0 54 54
affine 1 0 0 1 2 2
push graphic-context
path ''
pop graphic-context
pop graphic-context
push graphic-context
viewbox 0 0 54 54
affine 1 0 0 1 2 2
push graphic-context
path ''
pop graphic-context
pop graphic-context
pop graphic-context

с вложенными viewbox с, выделенными на graphic-context с настек, вы должны быть в состоянии правильно идентифицировать . 

$ convert icons-test.svg mvg:- | identify -format '%w' mvg:-
#=> 108
...