使 svg 元素适应容器尺寸

Question

我有以下 SVG 路径，旨在用作任何可能的宽度和高度的边框。但目前，我在以下两点上苦苦挣扎，如果有人能分享一些想法，我将不胜感激:-)
1。是否可以从 viewBox 中分离 SVG 并适应父维度？
2。是否可以分离 SVG 笔画宽度并始终按照定义？ (4px)

.c500x200 {
  width: 500px;
  height: 200px;
}

.c200x600 {
  width: 200px;
  height: 600px;
}

svg {
  width: 100%;
  height: 100%;
}

svg path {
  stroke-width: 4px;
  stroke: #d22f2c;
  fill: none;
}

<div class='c500x200'>
  <svg data-name="Layer 1" viewBox="0 0 357.5 248" xmlns="http://www.w3.org/2000/svg">
  <defs>
  </defs>
  <path transform="translate(-289 -320)" d="M623,565.5H291.5v-243h341v231s-1,12,14,12"/>
  </svg>
</div>

<div class='c200x600'>
  <svg data-name="Layer 1" viewBox="0 0 357.5 248" xmlns="http://www.w3.org/2000/svg">
  <defs>
  </defs>
  <path transform="translate(-289 -320)" d="M623,565.5H291.5v-243h341v231s-1,12,14,12"/>
  </svg>
</div>

Answer 1

是否可以将 SVG 从 viewBox 中分离出来并适应父维度？

viewBox 是让 SVG 适应父级尺寸的方式。我认为您要问的是是否可以让 viewBox 拉伸以填充父容器。

答案是肯定的。您可以使用preserveAspectRatio="none" 做到这一点。但请注意，这会拉伸形状的比例。所以形状中的曲线会被扭曲。见下文。

是否可以分离 SVG 笔划宽度并始终保持定义？ (4px)

是的。您可以在路径元素上设置vector-effect: non-scaling-stroke。见下文。

.c500x200 {
  width: 500px;
  height: 200px;
  background-color: linen;
}

.c200x600 {
  width: 200px;
  height: 600px;
  background-color: linen;
}

svg {
  width: 100%;
  height: 100%;
}

svg path {
  stroke-width: 4px;
  stroke: #d22f2c;
  fill: none;
  vector-effect: non-scaling-stroke;
}

<div class='c500x200'>
  <svg data-name="Layer 1" viewBox="0 0 357.5 248" preserveAspectRatio="none">
  <defs>
  </defs>
  <path transform="translate(-289 -320)" d="M623,565.5H291.5v-243h341v231s-1,12,14,12"/>
  </svg>
</div>

<div class='c200x600'>
  <svg data-name="Layer 1" viewBox="0 0 357.5 248" preserveAspectRatio="none">
  <defs>
  </defs>
  <path transform="translate(-289 -320)" d="M623,565.5H291.5v-243h341v231s-1,12,14,12"/>
  </svg>
</div>