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行的图像。前两行仅包含圆圈。接下来的两行只包含正方形。最后一行包含＆＃34; square，circle，square，circle＆＃34;

伪代码

这是我认为它会起作用的方式，但不幸的是我不知道如何处理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。但是，当你复制它们时，你需要为它们做两件事。

删除XML前导码（<?xml>和<!DOCTYPE>）。
添加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

通过合并其他SVG文件创建SVG图像

1 个答案: