How to hide "overlapping" stroke on a path element that overlaps with itself-CodePudding

I am trying to get the following image to look nice.

The issue is specifically right here:

Basically I'd like to hide the vertical strokes wherever they overlap with another part of the <path/>

I've made a simplified snippet below for people to play with.

path {
  transform: translate(50px, 50px);
  stroke-width: 1;
  stroke: black;
  opacity: .5;
  box-sizing: inherit;
  stroke-linecap: round;
  stroke-linejoin: miter;
}

<svg height="400px" width="400px">
<path stroke-width="1" stroke="black" fill="green" d="
          M 0,0 
   L -5,0
   L -5,-5
   L -22,-5
   L -22,-20
   L 22,-20
   L 22,-5
   L 5,-5
   L 5,0
   L 50,0
   L 50,-25
   L -22,-25
   L -22,-40
   L 132,-40
   L 132,-25
   L 60,-25
   L 60,0
   L 94,0
   L 94,-5
   L 33,-5
   L 33,-20
   L 165,-20
   L 165,-5
   L 104,-5
   L 104,0
          L 152.5,0 
          Q 155.5,8 152.5,16
          L 0,16 
          z"></path>
</svg>

Thanks!

CodePudding user response：

You can fake it with stroke-dasharray. If these figures are auto-generated, it will take a little math to calculate where the gaps need to go, but if everything is made with straight lines that shouldn't be too difficult.

<svg height="150px" width="400px" viewBox="-50-50 250 100">
    <path stroke-width="1" stroke="black" fill="green"
          d="M 0,0
            L -5,0
            L -5,-5
            L -22,-5
            L -22,-20
            L 22,-20
            L 22,-5
            L 5,-5
            L 5,0
            L 50,0
            L 50,-25
            L -22,-25
            L -22,-40
            L 132,-40
            L 132,-25
            L 60,-25
            L 60,0
            L 94,0
            L 94,-5
            L 33,-5
            L 33,-20
            L 165,-20
            L 165,-5
            L 104,-5
            L 104,0
            L 152.5,0 
            Q 155.5,8 152.5,16
            L 0,16
            z"
        stroke-dasharray="172 16 338 16 9999" />
</svg>

CodePudding user response：

Alternatively, you can split the shape into more than one path. And give them a non-transparent fill.

path {
  transform: translate(50px, 50px);
  stroke-width: 1;
  stroke: black;
  box-sizing: inherit;
  stroke-linecap: round;
  stroke-linejoin: miter;
}

<svg height="400px" width="400px">
<path stroke-width="1" stroke="black" fill="#80c080" d="
   M 0,0 
   L -5,0
   L -5,-5
   L -22,-5
   L -22,-20
   L 22,-20
   L 22,-5
   L 5,-5
   L 5,0
   L 50,0
   L 50,-25
   L -22,-25
   L -22,-40
   L 132,-40
   L 132,-25
   L 60,-25
   L 60,0
   L 152.5,0 
   Q 155.5,8 152.5,16
   L 0,16
   z
   "/>

<path stroke-width="1" stroke="black" fill="#80c080" d="
   M 94,0.5
   L 94,-5
   L 33,-5
   L 33,-20
   L 165,-20
   L 165,-5
   L 104,-5
   L 104,0.5
   "/>
</svg>