Div overflow logic in SVG?

Question

The Context

Working on a database schema editor in SVG which may have lot of records in some table , i am looking to add scrollbars to the table. The whole thing is coded in SVG and integrated in a ReactJS app within a container as a SVG document.

The Question

How could i get scrollbars like for instance scrolling the children of a where bounds would tell the viewport size and the children would determine the scrollable area?

I don't think this make much sense in SVG which is about 'painting' , however due to its increased popularity maybe something has been implemented about this?

Any ideas? Regards Philippe

I tried overflow='auto' on but it did not do the trick. See code below in ReactJS

<svg>
<g overflow={'auto'} width={100} height={100} id={'test1'}>
<DivSvg top={255} left={25} width={100} height={100} backgroundColor={'green'}/>
</g>
</svg>

I thought maybe overflow='auto' would make evaluate its size based on width/height and scroll the DivSvg ( i.e. ) which otherwise does not fit into the

Philippe P. Philippe P. · Accepted Answer · 2019-11-06T13:53:43

someone in our company found the right approach.

Actually svg can integrate HTML within rectangular areas known as '' Thanks to this i can draw my diagram in SVG while keeping table display coded in HTML and they work properly alltogether to rely both on SVG graphical skills VS HTML table content styling , scrolling , ...

Div overflow logic in SVG?

1 Answers