制作<svg>可根据数量滚动<rect>元素</rect></svg>

Question

I'm trying to make my <svg> element that contains an unknown amount of <rect> elements fill the screen's width, evenly apart and become scrollable on a smaller device, however, despite my <div> having an overflow, there's still too much "whitespace" to the right of the elements, how can I remove this and make the <rect> elements only use as much space as needed?

 .wrapper { overflow-x: auto; max-width: 100%; } svg { overflow: hidden; vertical-align: middle; }

 <div class="wrapper"> <svg height="30" version="1.1" viewbox="0 0 530 15" width="100%" xmlns="http://www.w3.org/2000/svg"> <rect aria-expanded="false" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="0" y="0"></rect> <rect aria-expanded="false" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="0" y="10.25"></rect> <rect aria-expanded="false" fill-opacity="1" height="30" width="12" rx="3" ry="3" x="0" y="20.25"></rect> </svg> </div>

Answer 1

For this I would use the event wheel and depending on the event.deltax I reset the viewBox of the svg element:

 let svg = document.querySelector("svg"); //variable used to reset the value of the viewBox attribute let Y = 0; svg.addEventListener("wheel", on_wheel); function on_wheel(event) { //prevent the scroling event.preventDefault(); Y += event.deltaY; svg.setAttribute("viewBox", `-4 ${Y} 20 30`); }

 svg { border:solid }

 <svg viewbox="-4 0 20 30" width="200"> <rect height="30" width="12" rx="3" ry="3" x="0" y="0"></rect> <rect height="30" width="12" rx="3" ry="3" x="0" y="40"></rect> <rect height="30" width="12" rx="3" ry="3" x="0" y="80"></rect> </svg>