javascript - 如何滑动响应式 SVG slider ？

Question

我制作了这个 SVG slider 。

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

当我通过...使 SVG 响应式时

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

..它不再起作用了。矩形被切片。(见片段)

---

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

附言有 2 种解决方案我不想使用:

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/