调整一个笔划在另一个笔划内的垂直位置

Question

我无法使用

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>

如何在不手动调整路径的情况下调整小笔划相对于大笔划的垂直位置？

我想要的是更接近这个的东西：

Answer 1

您可以缩放黑色路径。要使其适合并不容易，而且黑色路径的笔划不完全是 1。并且它还需要您进行变换或移动路径，以便弧线以 0,0 为中心（这里，我移动了路径）。

我也有其他想法，但没时间...

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