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

Either this issue is not reproducible or -- maybe more likely -- I don't get what the problem is. Can you explain what the result should look like? "adjust the vertical position" in relation to what? — chrwahl, Aug 23 '23 at 09:16
Welcome to StackOverflow, hope you will find new knowledge here. You can help us answering your question, by adding a [minimal-reproducible-example StackOverflow Snippet](https://stackoverflow.com/help/minimal-reproducible-example). It will help readers execute your code with one click. And help create answers with one click. Thank you. — Danny '365CSI' Engelman, Aug 23 '23 at 13:22
@chrwahl I have provided snippets and an image showing what I'm looking for — JDMCreator, Aug 23 '23 at 14:44

score 0 · Answer 1 · answered Aug 23 '23 at 19:59

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>

Thank you for your help, and pointing to `transform` is appreciated. Is there any way approach to would not need manual adjusting, as I would like to use it in an automated tool? — JDMCreator, Aug 27 '23 at 23:16

Adjust vertical position of a stroke inside another stroke

1 Answers1