Javascript 避免在响应SVG上拉伸细长的边框

是否有一种方法（可能没有JS）生成一个响应性SVG，其中倾斜的边框不会随着宽度而拉伸？请不要回答“使用CSS”，因为我需要创建一个复杂的掩码，而仅仅使用CSS是不可能的

body{padding:20px}

.cls-1{填充：fff；笔划：231f20；笔划斜接限制：10；}
测试

将

preserveAspectRatio

更改为

“xMaxYMax”

以避免拉伸，并将

高度

更改为

“100%”

如果大屏幕需要，让矩形增大

body{padding:20px}

.cls-1{填充：fff；笔划：231f20；笔划斜接限制：10；}
测试

谢谢，不幸的是，我需要保持高度不变，我有一个文本，在桌面/手机中都必须具有一定的大小。简短的回答是“否”。在某些情况下，你可以对其进行模糊处理，例如链接的“铅笔”示例。否则，您将需要创建两个表示左端和右端的SVG。第三个形成有弹性的中间部分。