拉伸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中，这样它就可以起到clippath的作用。但是我四处寻找并找不到如何实现这一目标的例子。

Answer 1

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

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

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