我正在开发一个项目，需要创建具有响应其父容器大小的笔画的 SVG 形状。我希望这些形状始终填充其父容器的宽度和高度，并且我还希望将它们绝对定位在父容器内。此外，我需要为这些形状添加描边颜色。
我遇到的一个问题是笔划宽度似乎不一致。有时，即使我将描边宽度设置为 1px，它也会显得更粗，可能是 10px 或更多，使形状看起来扭曲。
这是我想要实现的目标的示例： 我在这里添加了 1px 描边宽度，但我认为它变得很多了。尽管我为每边添加了 1px，但顶部、底部和左、右描边宽度的大小也有所不同。另外我怎样才能向这条路径添加 5px 边框半径
body {
padding: 100px 20px;
}
.parent-container {
width: 100%;
height: 400px;
background: black;
clip-path: polygon(
0% 0%,
95% 0%,
100% 20%,
100% 100%,
5% 100%,
0% 80%,
0% 0%
);
position: relative;
}
.cta-stroke {
position: absolute;
inset: 0px;
width: 100%;
height: 100%;
}
path {
stroke-width: 1px;
stroke: red;
}<!doctype html>
<html>
<head>
<title>svg shapes</title>
</head>
<body>
<div class="parent-container">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" fill="none" preserveAspectRatio="none"
class="cta-stroke">
<path d="M0 0 L95 0 L100 20 L100 100 L5 100 L0 80 L0 0 Z" />
</svg>
</div>
</body>
</html>如何实现 SVG 形状的响应能力和绝对定位，其笔划适应其父容器的大小，同时确保笔划宽度一致？另外，如何为形状添加圆角？任何帮助或指导将不胜感激。谢谢！
这篇文章中有关响应式 SVG 主题的第 7 条提示可能会有所帮助：
默认情况下，SVG 使用视口缩放所有内容，包括笔划 厚度。通常这效果很好，但在某些情况下 – 图表 以及作为文本外部效果应用的笔划，特别是 – 您可能希望保持笔划相同的粗细，无论什么 绘图的尺寸。这是鲜为人知的领域
vector-effect属性，可以用作演示文稿 属性或 CSS 中。
vector-effect: non-scaling-stroke;
以下是 MDN 文档 中此属性值的相关文本：
此值修改对象的描边方式。平时抚摸 涉及计算当前形状路径的笔划轮廓 用户坐标系并用笔画填充该轮廓 （颜色或渐变）。该值产生的视觉效果是 笔划宽度不依赖于变换 元素（包括非均匀缩放和剪切变换）和 缩放级别。