В настоящее время я работаю над сайтом, и мне нужна помощь по фигуре svg trapezoid.
Я решил использовать SVG, потому что до этого моя трапеция была реализована с помощью css, и главная проблема с этимэто не было адаптивным, как я ожидал.
Это форма, которую я хотел бы: Трапеция .
Я уже понял эту форму, но проблема в том, когдаразмер окна уменьшает форму, похожую на , что .
Так что мой вопрос: есть ли способы «зафиксировать» точки, чтобы сохранить форму первого изображения?
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>
Но теперь я хотел бы добавить еще однутрапеция справа от 1-го, как , что , но, как и раньше, моя проблема не в том, как реализовать форму, а в том, как она рендерится с помощью этого кода:
<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>
А как это выглядит .На первый взгляд, я подумал, что проблема была в preserveAspectRatio, поэтому я попытался заменить его на xMaxYMin slice off, но я не нашел способа получить приличный результат с ним.
Таким образом, у меня есть 2 проблемы, как расширить правую трапецию (я думаю, что это с шириной svg) и как переместить ее влево.Я пытался добавить поле, но пространство между двумя трапециями меняется, когда мы изменяем размер окна.
Спасибо за вашу помощь.
Валентин.