出口一组SVG图像标记为一个PNG的

其次这里的教程http://techslides.com/save-svg-as-an-image 出口一组SVG图像标记为一个PNG的

的问题是，我的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>

来源

2016-02-11 David Zhang

'我的svg是一组标签，我试图将它们拼接在一起'，是不是所有的“一组标签”？那是什么意思？多个SVG？使用您尝试导出的SVG更新您的问题。 – Mark

@Mark用svg编辑问题，希望有帮助！ –

您从示例中给出的印象是，您认为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"等。确保这些URL是正确的，否则你会得到空白图像或“破碎的图像”图标（取决于浏览器）。
您无需在每个<image>标记中定义xlink命名空间。将xmlns:xlink="http://www.w3.org/1999/xlink"移动到<svg>元素。你可以将它从<image>元素中删除。

来源

2016-02-12 04:45:25

出口一组SVG图像标记为一个PNG的

回答

相关问题