Adjust vertical position of a stroke inside another stroke

Question

I am having trouble adjusting the vertical position of a stroke that appears inside another stroke using stroke-dashoffset and stroke-dasharray :

<svg viewBox="0 0 100 100" width="400">
  <defs>
    <path id="p2" d="M 5 5 L 80 5 A 5 5 180 0 1 80 20 L 20 20" fill="none"
    pathLength="100" />
  </defs>
  <use href="#p2" id="large-segment" stroke-width="5" stroke="red" stroke-dashoffset="1" stroke-dasharray="100 100"/>
  <use href="#p2" id="small-segment" stroke-width="1" stroke="black" stroke-dashoffset="-30" stroke-dasharray="30 100"/>
</svg>

Of course, I could use the y attribute, but the small stroke won't longer follow the original path:

<svg viewBox="0 0 100 100" width="400">
  <defs>
    <path id="p2" d="M 5 5 L 80 5 A 5 5 180 0 1 80 20 L 20 20" fill="none"
    pathLength="100" />
  </defs>
  <use href="#p2" id="large-segment" stroke-width="5" stroke="red" stroke-dashoffset="1" stroke-dasharray="100 100"/>
  <use href="#p2" id="small-segment" stroke-width="1" stroke="black" y="1.8" stroke-dashoffset="-30" stroke-dasharray="30 100"/>
</svg>

How could I adjust the vertical position of the small stroke relative to the larger stroke without having to manually adjust the path?

What I would like is something closer to this:

A stroke inside another stroke

Answer 1

You could scale the black path. It is not so easy to make it fit and the stroke of the black path is not exactly 1. And it also requires that you play around with transform or move the path so that the arc is centered around 0,0 (here, I moved the path).

I also have other ideas but no time...

<svg viewBox="0 0 100 100" width="400">
  <defs>
    <path id="p2" d="M -75 -7.5 L 0 -7.5 A 5 5 180 0 1 0 7.5 L -60 7.5"
      fill="none" pathLength="100" />
  </defs>
  <g transform="translate(80 15)">
    <use href="#p2" id="large-segment" stroke-width="5" stroke="red"
      stroke-dashoffset="1" stroke-dasharray="100 100"/>
    <use href="#p2" id="small-segment" stroke-width="1.5" stroke="black"
      stroke-dashoffset="-30" stroke-dasharray="30 100" transform="scale(.74)"/>
  </g>
</svg>