通過合併其他SVG文件

Question

創建SVG圖像我喜歡創建基於兩個陣列一個SVG文件中的第一陣列保持的路徑SVG文件 應在由另一個陣列描述的一個SVG資源組合

陣列圖案路徑

這些模式可用 作爲矢量文件。每種圖案的尺寸爲200x200px
查看以下文件的內容。

$pathesToPatternsArray = array("0"=>"circle.svg", "1"=>"square.svg"); 

陣描述圖像

$positionOnTheImageArray = array(
0=>array(0,0,0,0), 
1=>array(0,0,0,0), 
2=>array(1,1,1,1), 
3=>array(1,1,1,1), 
4=>array(1,0,1,0); 

結果上的圖案的位置：

因此，我們有5行得到的圖像。前兩行只包含圓圈。接下來的兩行只包含正方形。最後一行包含「方形，圓形，方形，圓形」

僞

這是我認爲它的工作方式，但不幸的是我不知道如何處理SVG合併。我希望你能幫助我。我認爲它可能與GD，Imagick或簡單的文本文件處理工作，但我還沒有找到解決方案。 triangle.svg

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> 
<circle fill="#000000" stroke="#000000" stroke-miterlimit="10" cx="100" cy="100" r="100"/> 
</svg> 

內容square.svg

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> 
<rect y="0" fill="#000000" stroke="#000000" stroke-miterlimit="10" width="200" height="200"/> 
</svg> 

的Finaly

我的

<?php 

$svgOutputfile = createSVGFileRessource(); 

foreach($positionOnTheImageArray AS $row => $cellArray) 
{ 
    $cell = 0; 
    foreach($cellArray AS $selectedPattern) 
    { 
    $pattern = loadPattern($pathesToPatternsArray[$selectedPattern]); 
    $svgOutputfile->write($row,$cell,$pattern); 
    $cell++; 
    } 

$svgOutputfile->save(); 

內容真的期待能夠幫助我找到解決方案的答案。

Answer 1

我不確定您是問如何使SVG工作，或者如何在PHP中執行XML操作。我將假設前者。

方法1 - 您可以嵌套SVG元素的簡單方法

。因此，像下面的安排是合法的：

<svg> 
    <svg></svg> 
    <svg></svg> 
    <svg></svg> 
    ..etc.. 
</svg> 

所以你能做的就是寫出一個合適的頂級<svg>元素：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="800px" height="1000px" viewBox="0 0 800 1000"> 

然後附加在行和列的順序所有的孩子SVGs。但是，當你複製它們時，你需要爲它們中的每一個做兩件事。

1. 地帶的XML前導碼（<?xml>和<!DOCTYPE>）。
2. 添加x和y屬性以根據它們的陣列位置重新定位它們。 IE瀏覽器。 X * 200和y * 200

Demo here

注意，有一些潛在的絆腳石。例如，您可能檢查並避免重複的id屬性。他們應該是獨一無二的。對於這些簡單的SVG，這並不重要，但如果您最終爲您的單元使用更復雜的SVG，則可能是一個問題。

方法2 - 利用元素

在這種方法中，你只包括每個孩子SVG一次，然後與每個小區的<use>元素引用它們。

<svg> 
    <defs> 
     <svg id="circle">...</svg> 
     <svg id="square">...</svg> 
    </defs> 

    <use xlink:href="circle"/> 
    <use xlink:href="square"/> 
    ..etc.. 
</svg> 

這將導致一個更小的文件，並會更容易理解和建立與代碼。

Demo here