拉伸 SVG 以包含未拉伸的元素

Question

我正在尝试创建一个完整的窗口响应式漫画布局，其内容按比例匹配。我目前拥有的示例：https://jsfiddle.net/csroj3dg/

<svg height="100%" width="100%" viewBox="0 0 960 560" preserveAspectRatio="none">

我已将 SVG 设置为 preserveAspectRatio="none"，因此它将填满整个窗口。但我正在尝试找到一种方法来用更多的 SVG 图像填充面板，从而再次保持它们自己的比例。

“球”显然会被一些插图取代，但这只是一个小例子。

我什至不确定使用 SVG 布局是否真的是正确的方法，但我找不到纯粹使用 CSS 的方法。

一个猜测是，我应该以某种方式将 SVG 图像放在 #Panel-1 中，以便它可以用作剪辑路径。但是我四处搜索，找不到如何实现这一目标的示例。

Answer 1

如果元素在 SVG 内部，它会受到应用于 SVG 的缩放的影响。解决这个问题的唯一方法是一些 hacky 类型的解决方案：

1. 将圆放在另一个没有应用任何变换的单独 SVG 中。

2. 使用 JS 确定应用于父 SVG 的比例，然后对圆应用逆比例变换。这有点棘手，因为它需要将变形校正为圆形，但不影响其新位置。