SVG is there a way to combine multiple lines into a single path

Question

I have an app where I draw multiple lines and arcs as single elements, is there a way to make a copy of these elements into a single path? For example, if I draw a rectangle using 4 lines, can I make a copy of the 4 sides into a single path so that I can fill the path?

Here is an example of a block changing widths, going from 4 columns to 3 columns to 2 columns to 1 column. When initially added it is at 4 columns, each side has a unique class and id and also the top and top and bottom lines have 4 unique classes and id's each. So when I go from 4 to 3 I just hide certain classes and sane goes for going down to 2 or 1.

Here is another example of a differently shaped block.

Answer 1

If your path definitions are next to each other in the svg, you can group them with a g and then use a filter on the group to "fill" the content. I don't know snap, so can't say if it lets you insert arbitrary elements in the rendered svg.

Here's how you would write a filter like that. It uses fat strokes and a green-screen technique to selectively color the areas of overlapping strokes (the inside of the shape) and zero out the areas of non-overlapping strokes (the outside of the shape). This is performance intensive. The right way is to re-write your path code :(

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