Drag and zoom on SVG elements

[felixmagnell]

Is it possible to drag the screen and zoom when i'm over a SVG element?

What i need is to have multiple clickable SVG elements that i would want to zoom in and out and also be able to drag. As it is now i can only drag the Canvas around. Thanks

[felixmagnell]

I've been testing the example code and found out following: The first SVG element that is dragged will be the only draggable object including the canvas. So if i drag the circle i wont be able to drag around the canvas and vice versa. Is it possible to have multiple SVG elements (call it "block") connected (As in moves together) and also be able to move the block by dragging in different elements?

[adam-s]

Try importing the element from react-native-svg.

[felixmagnell]

@adam-s I tried with a project where the elements came from react-native-svg - it's my intention to use it with react-native-svg. Have you been able to get a similar problem to work?

[adam-s]

I don't fully understand the issue. However, the <G/> from react-native-svg should group elements together. This is the base for the <SvgPanZoomElement/>. I haven't tested it but it should work exactly like a group, so the following should work too.

          {/* Responds to clicks */}
          <SvgPanZoomElement
            x ={80}
            y ={80}
            onClick         = {()=>{ console.log('onClick!') }}
            onClickCanceled = {()=>{ console.log('onClickCanceled!') }}
            onClickRelease  = {()=>{ console.log('onClickRelease!') }}
            onDrag          = {()=>{ console.log('onDrag!') }}
          >
            <Circle
              cx          = {42}
              cy          = {42}
              r           = {42} 
              stroke      = "blue"
              strokeWidth = "2.5"
              fill        = "red"
            />
            <Circle
              cx          = {72}
              cy          = {72}
              r           = {72} 
              stroke      = "blue"
              strokeWidth = "2.5"
              fill        = "red"
            />
          </SvgPanZoomElement>

[witherBattler]

This is an issue for me as well...