SVG stroke as glued lines

Question

Is there a way to define stroke of a single polygon so that it would look like multiple glued polygons? See this image:

Answer 1

No, not currently. (In the future, Vector Effects may let you do this.)

For the moment, you would need to have two polygons drawn with different stroke colours and thicknesses, and then use a clipping path to make sure that it looks like the thicker stroke does not also paint on the inside of the shape. For example:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100" height="100">
  <defs>
    <polygon id="p" points="20,10 10,60 30,50 50,30"/>
    <clipPath id="c">
      <!-- a 100x100 square with the polygon cut out of it -->
      <path d="M0,0 100,0 100,100 0,100 z M20,10 10,60 30,50 50,30 z"/>
    </clipPath>
  </defs>
  <rect width="100" height="100"/>
  <g clip-path="url(#c)" fill="none">
    <use xlink:href="#p" stroke="yellow" stroke-width="8"/>
    <use xlink:href="#p" stroke="blue" stroke-width="4"/>
  </g>
</svg>

Answer 2

As with the last answer, you need 2 paths. However I would use 2 donut holes where the hole has nearly the diameter of the whole ring.The thing to note is that the outside of the inner ring forms the inside of the outer ring. Obviously stroke-width is zero.

Answer 3

You can emulate this with a morphology filter.

<svg width="2000px" height="2000px" viewBox="0 0 4000 4000">
  <defs>
    <filter id="dual-line" primitiveUnits="userSpaceOnUse">
      <feColorMatrix result="just-stroke" type="matrix" values="0 0 0 0 0
                                           0 1 0 0 0 
                                           0 0 1 0 0 
                                           -1 0 0 1 0"/>
      
       <feColorMatrix in="SourceGraphic" result="just-fill" type="matrix" 
                                   values="0 0 0 0 1
                                           0 0 0 0 0 
                                           0 0 0 0 0 
                                           0 0 0 1 0"/>     
      
  
       <feMorphology in="just-stroke" operator="dilate" radius="5"/>
       <feGaussianBlur stdDeviation="6"/>
      <feComponentTransfer result="pre-outer">
        <feFuncA type="table" tableValues="0 0 .75  1">
      </feComponentTransfer>
        
        <feColorMatrix result="blackstroke" in="just-stroke" type="matrix" values=" 0 0 0 0 0
                                                                0 0 0 0 0
                                                                0 0 0 0 0 
                                                                0 0 0 1 0"/>
        
       <feComposite operator="over" in2="pre-outer" in="blackstroke"/>
        <feComposite operator="in" in2="just-fill"/>
   
    </filter>
    </defs>
<g filter="url(#dual-line)">
  <path d="M100 800 C 400 100, 650 100, 950 800 S 1500 1500, 100 800" stroke-width="5" stroke="green" fill="red"/>
</g>
</svg>