Javascript 如何在g标记下向svg子元素添加水平滚动

---

我想将水平滚动添加到svg列表的g标记下

我没有使用任何html标记。它只包含svg元素。我试图添加css属性ie-.onEntryaction{overflow-x:scroll！important；width:100px；fill:red}它正在将滚动添加到“onEntryaction”。但不起作用的滚动行为请看这个答案：请看附在这个问题上的图片参考，实际上我想在“g”标签下添加滚动，如果矩形框的数量占用的空间大于“g”部分的宽度，请将clippath添加到

g

，将拖动侦听器添加到

g

并修改dragno浏览器上的

transform

translate

x

属性，以支持标记下的scollbar。滚动条是HTML唯一的东西。

<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>