将一组 svg 图像标签导出为单个 png

Question

按照这里的教程 http://techslides.com/save-svg-as-an-image

问题是我的 svg 是一组 <image> 标签，我正在尝试将它们拼接在一起并导出为完整的 png/pdf，想知道这是否可能

我目前得到的只是一个~1.7 mb的文件，这是一个空白图像

编辑：这是我尝试导出的 svg 示例

<svg width="11342.5" height="320" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <g width="11342.5" height="320">
     <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="source1" width="336" height="320" x="0" y="0"></image>
     <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="source2" width="336" height="320" x="0" y="0"></image>
     ...
  </g>
</svg>

Answer 1

你从样本中得到的印象是你认为SVG的工作方式类似于HTML。 您在文件中放置一系列元素，渲染器会为您布置它们。 事实并非如此。 在 SVG 中，您必须自己定位元素。

例如，所有<image>元素都堆叠在一起。 那是因为它们都位于 (0,0(。 您需要将每个图像的 X 位置设置为前一个图像的右边缘。 例如：

<image width="336" height="320" x="0" y="0"/>
<image width="336" height="320" x="336" y="0"/>
<image width="336" height="320" x="672" y="0"/>
..etc..

文件的其他一些问题：

1. 图像的宽度为 336，但 SVG 宽度 (11342.5( 不是 336 的倍数。为什么？
2. <g>元素没有width和height属性。您不妨删除它们。
3. 您的图片链接xlink:href="source1"看起来有问题。 它可能应该是类似xlink:href="source1.jpg"等。 确保这些URL正确，否则您将获得空白图像或"损坏的图像"图标(取决于浏览器(。
4. 无需在每个 <image> 标记中定义 xlink 命名空间。 将xmlns:xlink="http://www.w3.org/1999/xlink"移动到<svg>元素。 你可以把它排除在<image>元素之外。