Question

有没有一种方法，可能没有JS，会生成一个响应的SVG，其中倾斜的边框不会随宽度拉伸？请不要使用“使用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>

Answer 1

将preserveAspectRatio更改为"xMaxYMax"以避免拉伸，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>

避免在响应式SVG上拉伸修长的边框

1 个答案: