SVG有一种方法可以将多条线组合成一条路径

Question

我有一个应用程序，我将多行和弧绘制为单个元素，有没有办法将这些元素复制到一个路径？例如，我使用4行绘制一个矩形，我可以将4个边的副本复制到一个路径中，以便我可以填充路径吗？

以下是块更改宽度的示例，从4列到3列到2列到1列。最初添加时，它是4列，每一行都有一个唯一的类和id，顶部和顶部和底部的行有4个唯一的类和每个id。因此，当我从4变为3时，我只是隐藏某些类，而且理智可以归结为2或1。

这是不同形状块的另一个例子。

Answer 1

如果您的路径定义在svg中彼此相邻，则可以使用g对它们进行分组，然后在组中使用过滤器以“＃34; fill＆＃34;内容。我不知道snap，所以不能说它是否允许你在渲染的svg中插入任意元素。

在这里，您将如何编写类似的过滤器。它使用脂肪笔划和绿屏技术来选择性地为重叠笔划（形状内部）的区域着色，并将非重叠笔划区域（形状的外部）清零。这是性能密集型的。正确的方法是重写你的路径代码：（

＆＃13;

＆＃13;

<svg width="800px" height="600px" viewbox="0 0 800 600">
  <defs>
    <filter id="fillme" x="-50%" y="-50%" height="200%" width="200%">
      <feComponentTransfer>
        <feFuncA type="table" tableValues="0 0 0 1 1 1"/>
      </feComponentTransfer>
    </filter>
  </defs>
<g filter="url(#fillme)">
  <path stroke="black" stroke-opacity="0.4" stroke-width="80" fill="none" d="M200,200 a170,170 0 0 1 170,170"/>
  <path stroke="blue"  fill="none" d="M200,200 l0,40"/>
  <path stroke="red" stroke-opacity="0.4" stroke-width="80"fill="none" d="M200 240 a130,130 0 0 1 130,130"/>
  <path stroke="green" fill="none" d="M330,370 l40,0"/>
<g>
  
  
</svg>

＆＃13;

＆＃13;

＆＃13;