Wie schiebt man einen Responsive SVG Slider?

Question

Ich habe diesen SVG Slider gemacht.

Wenn über die roten Balken unten schweben den Regenbogen Rechteck#moveSVG sollte slide von rechts oder umgekehrt nach links. Das funktioniert gut, aber nur wenn ich die #moveSVG nicht reagiere.

Als ich machen das SVG ansprechbar durch ..

• .. die width und height zu entfernen und es mit CSS 100vw und 100vh
• .. Hinzufügen viewBox="0 0 5200 900" preserveAspectRatio="xMinYMax slice"

Einstellung. .it funktioniert nicht mehr. Das Rechteck ist abgeschnitten. (Siehe Snippet)

---

Nun, wie kann ich diese ansprechenden Schieber machen, ohne sie zu schneiden?

P.S. Es gibt zwei Lösungen, die ich lieber nicht verwenden:

1. statt sich zu bewegen durch transform-translate Einstellung kann ich die viewBox x ändern koordinieren, aber das scheint schlampig, da muss ich nicht die y Breite ändern und Höhe
2. Ich kann die transform auf dem Sub-SVG #bandsSVG verwenden, aber im realen Projekt gibt es 3 sub-SVGs, also würde ich es 3 mal tun müssen. Scheint auch schlampig.

-Code ->https://jsfiddle.net/e_motiv/53w0unc3/

Answer 1

Die Lösung ist eigentlich eine Gruppe unter dem svg hinzuzufügen und diese Gruppe zu übersetzen und die svg mit Ansprechbarkeit und viewBox zu verlassen.

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

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