как добавить горизонтальную прокрутку к дочерним элементам svg под тегом g

<svg width="1200" height="1200"><g><g class="flow-group"><g class="node-group" id="parent-node-fb-elem-id-3" data-id="fb-elem-id-3" data-x="192" data-y="95" transform="translate(192, 95)"><rect id="state" width="270" height="240" fill="#fff" cursor="all-scroll" stroke="#9bc8ff" filter="url(#dropShadowv-21195304394)" rx="15" ry="15"></rect><g class="onEntry" id="onEntry-fb-elem-id-3" data-id="fb-elem-id-3" width="270" height="42"><rect x="0" id="onentry-1574072990" rx="10" ry="10" y="51" height="42" width="42" class="love" draggable="true" fill="#6cf0df"></rect><rect x="45" id="onentry-1574072992" rx="10" ry="10" y="51" height="42" width="42" class="love" draggable="true" fill="#277270"></rect><rect x="90" id="onentry-1574072994" rx="10" ry="10" y="51" height="42" width="42" class="love" draggable="true" fill="#ec02d9"></rect><rect x="135" id="onentry-1574072996" rx="10" ry="10" y="51" height="42" width="42" class="love" draggable="true" fill="#89ddfc"></rect><rect x="180" id="onentry-1574072998" rx="10" ry="10" y="51" height="42" width="42" class="love" draggable="true" fill="#c8791e"></rect><rect x="225" id="onentry-1574073026" rx="10" ry="10" y="51" height="42" width="42" class="love" draggable="true" fill="#3e727f"></rect></g></g></g></g></svg>

я хотел добавить горизонтальную прокрутку в список svg под тегами g