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..

您的文件存在其他一些问题：

您的图片宽度为336，但您的SVG宽度（11342.5）不是336的倍数。为什么会这样？
<g>元素没有width和height属性。你也可以删除它们。
您的图片链接xlink:href="source1"看起来不对。它应该类似于xlink:href="source1.jpg"等。确保这些网址是正确的，否则您将获得空白图片或“＃34;破碎的图像”＃34;图标（取决于浏览器）。
您不需要在每个xlink标记中定义<image>命名空间。将xmlns:xlink="http://www.w3.org/1999/xlink"移至<svg>元素。你可以将它从<image>元素中删除。

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

1 个答案: