如何定义svg-sprite的宽度/高度并将这些值写入文件(使用Linux或Mac )

Question

我正在尝试使用npm包 svg-sprite 创建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>

​

为了定义这个sprite的大小(例如宽度)，我使用命令，从util ImageMagick识别。

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

或者把它写到文件中

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

的问题是，在文件中，我没有得到完整的sprite (108)的宽度，而只有最后一个子svg图像(54)的宽度，这是包含在普通sprite中的。

请告诉我我的错误在哪里？如何使识别返回正确的宽度。或者建议我换个变体来解决这个问题。

Answer 1

我怀疑嵌套的svg标记混淆了ImageMagick的内部SVG解码器。尝试将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