如何滑动响应式SVG滑块？

Question

我制作了这个SVG滑块。

当鼠标悬停在底部的红色条上时，彩虹矩形 #moveSVG应从右向左滑动，反之亦然。 这样做很好，但前提是我没有让#moveSVG做出响应。

当我通过..

制作SVG 响应时

• ..删除width和height并使用css 100vw和100vh
进行设置
• ..添加viewBox="0 0 5200 900" preserveAspectRatio="xMinYMax slice"

..它不再起作用了。矩形是切成薄片的。 （见摘录）

现在如何在不切片的情况下制作这个响应滑块？

P.S。有两种解决方案我不想使用：

1. 而不是通过将transform设置为translate来移动，我可以更改viewBox x坐标，但这看起来很草率，因为我不需要更改y宽度和高度
2. 我可以在子SVG #bandsSVG上使用transform，但在实际项目中有3个子SVG，所以我必须做3次。也似乎马虎。

代码 - ＆gt; https://jsfiddle.net/e_motiv/53w0unc3/

Answer 1

解决方案实际上是在svg下添加一个组并翻译该组并使svg保持响应性和viewBox。

<g id="realMoveSGV">..</g>

https://jsfiddle.net/e_motiv/xv93zdx1/