我目前正在做一个网站，我需要有关 svg 梯形形状的帮助。
我决定使用 SVG，因为在此之前，我的梯形是用 css 实现的，而它的主要问题是它没有像我预期的那样响应。
这是我想要的形状:Trapezoid .
我已经意识到这个形状，但问题是当窗口尺寸减小时形状看起来像 that .
所以我的问题是，有什么方法可以“锁定”这些点以保持第一个图像的形状吗？
HTML:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="84%" height="200" preserveAspectRatio="none">
<polygon fill="blue" points="1.5 0, 100 0, 85 100, 1.5 100"/>
...
</svg>
编辑:
感谢 Paulie_D，我已经修复了我的问题:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
<polygon fill="#00a8f3" points="1.5 0, 100 0, 0 100, 1.5 100"/>
...
</svg>
但现在我想在第一个右边添加另一个梯形，如 that但和以前一样，我的问题不是如何实现形状，而是如何用这段代码渲染它:
<div class="col-md-2 col-xs-12">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" transform="rotate(180)" class="spaceBetweenButton">
<polygon fill="#00a8f3" points="0 0, 130 0, 0 130, 0 130" />
</svg>
</div>
它是怎么来的appear .乍一看，我认为问题出在 preserveAspectRatio。所以我尝试用 xMaxYMin slice off 替换它但我没有找到一种方法来获得不错的结果。
所以我有 2 个问题，如何扩展右梯形(我认为它与 svg 的宽度有关)以及如何在左侧移动它。我试图添加边距，但是当我们调整窗口大小时，2 个梯形之间的空间会发生变化。
感谢您的帮助。
瓦伦丁。
最佳答案
只需将另一个多边形添加到您的 SVG。
- 将第一个多边形的右端向左移动一点
- 在其右侧添加第二个形状正确的多边形，并留出适当的间隙。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="200" preserveAspectRatio="xMaxYMin slice" class="spaceBetweenButton" >
<polygon fill="#00a8f3" points="0 0, 83 0, 0 83"/>
<polygon fill="#00a8f3" points="85 0, 100 0, 100 100, 0 100, 0 85"/>
</svg>关于html - 当窗口随 svg 减小时形状发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56932672/