SVG, как выровнять обводку внутри холста?

Question

[SuperToster]

Привет!

C 2010 в контексте SVG2 встречаются упоминания: stroke-alignment, stroke-location, stroke-position. Но в природе такие свойства так и не появились.

Хочу сделать обводку для резинового блока. Опытным путём получился такой костыль (сдвинуть по оси и вычесть разницу от сдвига): jsfiddle.net/21ek6avu/

если не работает фидл

<svg>
  <rect width="100%" height="100%" />
</svg>

svg {
  --width: .4rem;

  width: 100%; height: 100%;

  rect {
    width: calc(100% - var(--width));
    height: calc(100% - var(--width));
    stroke-width: var(--width);
    x: calc(var(--width) / 2);
    y: calc(var(--width) / 2);

    rx: 1.2rem;
    ry: 1.2rem;
    stroke-dasharray: 10 6;
    stroke-linejoin: round;

    fill: none;
    stroke: red;
  }
}

html {
  font-size: 10px;
}

body {
  padding: 3rem;
}

имеет право на жизнь или есть лучшее решение?
Как таки в 2022 выровнять обводку внутри холста?

Спасибо!

Answer 1

[RAX7]

Альтернативное решение для подобных случаев - включить overflow: visible для svg https://jsfiddle.net/hbtg1dqs/