Адаптивный интервал в группе SVG? - PullRequest
Новая
       41

Адаптивный интервал в группе SVG?

0 голосов
/ 21 июня 2020

У меня есть SVG, экспортированный из Adobe XD, это набор из пяти «карточек», на которых показаны лица некоторых людей, расположенные в определенном порядке. Вот как структурирован код: 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="700" height="430" viewBox="0 0 700 430">
  <defs>
  ...
  </defs>
  <g id="USERS" clip-path="url(#clip-USERS)">
    <g id="Group" transform="translate(-793.227 -295.708)">
      <g id="User_5" data-name="User 5" transform="translate(1340.921 326.103) rotate(-14)">
      ...
      </g>
      <g id="User_4" data-name="User 4" transform="translate(1052.907 570.449) rotate(16.024)">
      ...
      </g>
      <g id="User_3" data-name="User 3" transform="translate(1170.434 426.218) rotate(-14)">
      ...
      </g>
      <g id="User_2" data-name="User 2" transform="translate(984.139 426.348) rotate(-14)">
      ...
      </g>
      <g id="User_1" data-name="User 1" transform="translate(827.868 347.168) rotate(16.024)">
      ...
      </g>
    </g>
  </g>
</svg>

Мне нужно разместить изображение на веб-сайте с адаптивным фоном, и я также пытаюсь сделать размер изображения адаптивным.

С помощью Adobe XD я могу изменять размер группы без изменения соотношения сторон карт, то есть затрагивается только пространство между ними. Я пытаюсь добиться того же с SVG на своем веб-сайте.

Вот GIF из того, что я хотел бы получить конкретно:

отзывчивое изменение размера

До сих пор я пытался заменить width="700" height="430" на width="100%" height="auto" в заголовке SVG, возможно, даже добавить preserveAspectRatio="none", но это влияет на все изображение, а не только на пространство между объектами.

Есть помощь?

1 Ответ

0 голосов
/ 21 июня 2020

То, что вы хотите, невозможно, просто возясь с viewBox и preserveAspectRatio. Все, что находится внутри SVG, будет масштабироваться вместе с самим SVG.

Вам нужно будет использовать Javascript, либо:

  • Не используйте viewBox и вместо этого измените положение карты самостоятельно в соответствии с текущей шириной и высотой, или
  • Позвольте SVG изменить положение и масштабировать их (используя viewBox et c), а затем примените преобразование обратного масштабирования к каждой карте, чтобы противодействовать масштабированию, которое Применен SVG.

В качестве альтернативы можно сделать каждую карточку отдельным изображением SVG и использовать CSS, чтобы расположить их относительно родительской ширины и высоты.

...