通過合並其他 SVG 文件創建 SVG 圖像

Question

我喜歡基於兩個數組創建一個 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 或簡單的文本文件處理，但我還找不到解決方案。

<?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();

三角形的內容.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>

最后

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

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

然后按行和列順序附加所有子 SVG。 但是，當您復制它們時，您需要對它們中的每一個都做兩件事。

1. 去除 XML 序言（ <?xml>和<!DOCTYPE> ）。
2. 添加x和y屬性以根據其數組位置重新定位它們。 IE。 x 200 和 y 200

演示在這里

請注意，有一些潛在的絆腳石。 例如，您可能會檢查並避免重復的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>

這將導致文件更小，並且使用代碼更容易理解和構建。

演示在這里