有没有办法，可能没有 JS，生成响应式 SVG，其中倾斜边框不随宽度拉伸(stretch)？请不要回复“使用 CSS”，因为我需要创建一个复杂的掩码，而单独使用 CSS 是不可能的。
body {padding: 20px}<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<svg preserveAspectRatio="none" width="100%" height="60" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350.47 32.42">
<defs><style>.cls-1{fill:#fff;stroke:#231f20;stroke-miterlimit:10;}</style></defs>
<title>test</title>
<polygon class="cls-1" points="0.93 31.91 21.34 0.5 333.39 0.5 349.62 31.91 0.93 31.91"/>
</svg>
</body>
</html> 
最佳答案
将 preserveAspectRatio 更改为 "xMaxYMax" 以避免拉伸(stretch)并将 height 更改为 "100%" 让矩形如果需要大屏幕，可以增长
body {padding: 20px}<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<svg preserveAspectRatio="xMaxYMax" width="100%" height="100%" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 350.47 32.42">
<defs><style>.cls-1{fill:#fff;stroke:#231f20;stroke-miterlimit:10;}</style></defs>
<title>test</title>
<polygon class="cls-1" points="0.93 31.91 21.34 0.5 333.39 0.5 349.62 31.91 0.93 31.91"/>
</svg>
</body>
</html>关于javascript - 避免在响应式 SVG 上拉伸(stretch)细长边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36597688/