通过合并其他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();

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

我真的很期待能够帮助我找到解决方案的答案.

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>

这将导致更小的文件,并且将更容易理解和构建代码.

在这里演示