Removing gap between two SVG paths without removing anti-aliasing-CodePudding

I have two SVG paths that have a gap between them.

From reading through other questions (

<svg height="300" width="300" shapeRendering="crispEdges">
        <path
          d="M150 10 a120 120 0 0 1 103.9230 60"
          fill="none"
          stroke="green"
          stroke-width="20"
        />
        <path
          d="M253.9230 70 a120 120 0 0 1 0 120"
          fill="none"
          stroke="green"
          stroke-width="20"
        />
</svg>

I've also tried the suggestion in this question to add crispEdges to the parent svg of the path and add shapeRendering="optimizeQuality" to the path but that didn't work.

How can I remove the gap AND keep the smooth edges of my svg path?

CodePudding user response：

If you able to edit the svg in editor, you can overlap like this. The darker green is the intersection between two paths.

Overlapping

CodePudding user response：

As a quick fix, you can make the ends overlap with stroke-linecap="square"

But ideally, you need to create a single path instead of two separate paths.

<svg height="300" width="300" shapeRendering="crispEdges">
        <path
          d="M150 10 a120 120 0 0 1 103.9230 60"
          fill="none"
          stroke="green"
          stroke-width="20"
          stroke-linecap="square"
        />
        <path
          d="M253.9230 70 a120 120 0 0 1 0 120"
          fill="none"
          stroke="green"
          stroke-width="20"
          stroke-linecap="square"
        />
</svg>