SVG 组中的响应间距？

Question

我有一个从 Adobe XD 导出的 SVG，它是 collection 五张“卡片”，显示了以特定模式排列的一些人的脸。以下是代码的结构：

<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，我可以在不改变卡片纵横比的情况下调整组的大小 - 也就是说，只有它们之间的 space 受到影响。我正尝试在我的网站上使用 SVG 实现相同的效果。

这里是我特别想获得的GIF：

到目前为止，我已经尝试在 SVG header 中用 width="100%" height="auto" 替换 width="700" height="430"，甚至可能添加 preserveAspectRatio="none"，但这会影响整个图像，而不是只有 objects.

之间的 space

有什么帮助吗？

Answer 1

viewBox和preserveAspectRatio不是你想要的。 SVG 内的任何内容都将随 SVG 本身一起缩放。

您需要使用 Javascript，然后：

不要使用viewBox，而是根据当前的宽度和高度自行重新定位卡片，或者
让 SVG 重新定位和缩放它们（使用 viewBox 等），然后对每张卡片应用逆缩放变换以抵消 SVG 应用的缩放。

或者，将每张卡片设为单独的 SVG 图像并使用 CSS 相对于父级宽度和高度定位它们。

SVG 组中的响应间距？

Responsive spacing in SVG group?

css

svg

responsive-images

responsive