如何滑动响应式SVG滑块？

Question

我制作了这个SVG滑块。

当悬停在底部的红色条上时，彩虹矩形#moveSVG应从右向左滑动，反之亦然。这工作正常，但只有我不使#moveSVG响应。

当我通过..做出响应SVG

• ..删除width和height并用css 100vw和100vh设置它
• ..添加

  viewBox="0 0 5200 900" preserveAspectRatio="xMinYMax
  slice"

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

---

现在我怎样才能制作这个响应滑块而不切片呢？

附：有两种解决方案我不想使用：

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

代码 - > https://jsfiddle.net/e_motiv/53w0unc3/

Answer 1

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

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

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