Как позиционировать обводку в svg?

Question

[kiberlain]

Всем известно что если обычному html-блоку задать box-sizingg border-box то ширина блока не будет увеличиватся за счёт бордера, потому что он будет размещаться как бы "внутри" блока и не будет влиять на ширину. Сейчас разбираюсь с свг и не могу как сделать что-то подобное для stroke. Если конкретнее, то в моей задаче контур фигуры "сверху" по разметке частично перекрывается контуром нижней фигуры, сейчас ищу способы как это можно исправить.

Answer 1

[forspamonly2]

можно сделать обводку вдвое толще и поставить этот же путь в качестве маски, чтобы обрезать наружнюю часть.

codepen лежит, как очухается - выложу пример. пока так:

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