0

我正在尝试使用 npm package 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="...”&gt;
   </svg>
  <svg height="54" width="54" viewBox="-2 -2 54 54" ...>
    <path d="...”&gt;
  </svg>
</svg>

要定义此 svg-sprite 的大小（例如宽度），我使用来自 util ImageMagick的命令identify。

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

或将其写入文件

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

问题是在文件中我没有得到完整 svg-sprite 的宽度（108），但只有最后一个子 svg 图像的宽度（54），它包含在常见的 svg-sprite 中。

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

4

1 回答 1

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

将嵌套的 s 与堆栈上的viewboxs 隔离graphic-context，您应该能够正确识别。

$ convert icons-test.svg mvg:- | identify -format '%w' mvg:-
#=> 108
于 2019-02-14T14:48:32.917 回答