SVG Image in ScrollView

Webix JS
1

How can I add an SVG into a ScrollView and be able to pan around? The SVG will be bigger than the ScrollView container so I want to be able to pan the SVG around.

This code puts the SVG in the ScrollView but there are no scroll bars:

            body: {
                view: 'scrollview',
                body: {
                    template: "<svg width='5000' height='5000'><circle cx='2500' cy='2500' r='2400' stroke='black' stroke-width='4' fill='red' /></svg>"
                }
            }

Does there need to be explicit drag/drop behavior added to be able to pan the image?

Thanks!

2

You need to define the height of content to enable scrollview functionality

http://webix.com/snippet/d340e903

or just enable scrolls on template

http://webix.com/snippet/9a389d50

3

Thanks that was easy.

Now onto the second question I asked. What events do I need to implement to pan around the image?

4

How must the code looks like, to zoom and pan the svg image ?

Best Regards
Matthias

5

Unfortunately, there is no ready to use solution. On touch devices it must be possible to disable webix-touch handlers to use native pan and zooming actions. As for desktop and mouse, it must be added through raw HTML events.

6

Ok thanks.

7

here I will share an example I made with d3, maybe it helps someone else too. http://webix.com/snippet/972ea011
The svg graphic is based on a graphviz DOT file, which is rendered with dagreD3 and the zooming is done with d3.

8

That’s good stuff Matthias.