如何在不手动调整路径的情况下调整SVG内部描边的垂直位置？

我在使用stroke-dashoffset和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>

当然，我可以使用y属性，但这样小描边将不再跟随原始路径：

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

如何在不需要手动调整路径的情况下，调整小描边相对于大描边的垂直位置？我想要的效果是让小描边位于大描边的内部。

内容的提问来源于stack exchange，提问作者JDMCreator