Question

我目前正在网站上，需要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的宽度）以及如何将其向左移动。我试图增加边距，但是当我们调整窗口大小时，两个梯形之间的间距会改变。

感谢您的帮助。

瓦伦丁。

Answer 1

只需在您的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>

当窗口随着svg

1 个答案: