How to position stroke in svg?

Question

css

Everyone knows that if you set box-sizingg border-box to a regular html block, then the width of the block will not increase due to the border, because it will be placed "inside" the block and will not affect the width. Now I understand with svg and I can’t how to do something similar for stroke. More specifically, in my task, the outline of the shape "on top" of the markup is partially overlapped by the outline of the bottom figure, now I'm looking for ways to fix this.

Answer 1

You can make the stroke twice as thick and use the same path as a mask to cut off the outer part.
codepen lies, as it comes to its senses - I will lay out an example. Let it be for now:

<svg width="150" height="150">
  <defs>
    <mask id="sameRect">
      <rect width="100" height="100"  fill="white"/>
    </mask>
  </defs>
  <rect width="100" height="100" fill="yellow" stroke="red" stroke-width="8px" mask="url(#sameRect)"/>
</svg>