SVG有没有办法将多条线组合成一条路径答案

【问题标题】：SVG is there a way to combine multiple lines into a single pathSVG有没有办法将多条线组合成一条路径
【发布时间】：2015-01-22 12:08:39
【问题描述】：

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

这里是一个块改变宽度的例子，从 4 列到 3 列到 2 列到 1 列。最初添加时，它是 4 列，每一侧都有一个唯一的类和 id，而且顶部和顶部和底部的行都有 4 个唯一的类和 id。因此，当我从 4 到 3 时，我只是隐藏了某些类，而理智地去到 2 或 1。

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

【问题讨论】：

使用矩形的坐标创建一个路径元素，作为它的 M 和 L 参数。
好吧，我的应用程序已经完成，希望能够填充块，块随时更改宽度，所以我希望使用现有的线/弧元素。矩形只是我拥有的一种简单形状。我有许多不同的块或不同的形状和大小，所有这些都可以改变宽度。

标签： svg path fill snap.svg

【解决方案1】：

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

以下是编写这样一个过滤器的方法。它使用粗笔划和绿屏技术来选择性地为重叠笔划区域（形状内部）着色，并将非重叠笔划区域（形状外部）归零。这是性能密集型的。正确的方法是重写你的路径代码:(

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

【讨论】：

看起来我不能用 Snap SVG 填充一个组。我可以在他的组内放置一个矩形并填充它，但并非所有块都是像示例图像那样的矩形。其中一些是 1/4 圈或 1/2 圈。所以这不仅会填充线条内部，还会填充 1/4 或 1/2 圆占据的整个矩形。
那我也不知道怎么实现你想要的。您可以填充路径，也可以填充形状，但不能填充断开的路径组。很抱歉，但最好的办法是用完整的封闭路径重写。
我想当块的宽度发生变化时，我必须想办法以编程方式计算外部路径。由于我有在 XML 文件中生成这些块的数据，我想我将不得不编写一些代码来构建外部路径，然后填写该路径。真的希望避免这样做。 :(
我在问题中添加了一个示例过滤器。请注意，您必须知道形状的尺寸才能使用正确的笔划宽度，这仅适用于所有线条平行的形状。那么，可能没那么有用？
我认为这可能会起作用，因为所有的线都是平行的，而且因为我有生成形状的数据，所以我知道尺寸是多少。所以我认为理论上这可行。