出口一組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的

回答

相關問題