Cant interact with SVG in touch devices

[bagaskarala]

I have added interaction in SVG, using click and hover. Then when i use this panzoom in mobile, i cant click/hover the svg. I must pause() in order to svg work normally again. How to overcome this?

[srogers]

I'm using panZoom with SVGs and I'm not seeing that. Click and hovertips are working.

[bagaskarala]

I'm using panZoom with SVGs and I'm not seeing that. Click and hovertips are working.

in touch devices?

[srogers]

I'm not set up for overtips on mobile, but clicks are working

[franzwilding]

If anyone has the same problem. This solved it for me (using tippy.js):

this.panzoom = panzoom(
                element,
                {
                    onTouch: function(e) {
                        if(e.target._tippy) {
                            e.target._tippy.show();
                        }
                        e.preventDefault();
                        return false;
                    },
                }
            );

[mirinnes]

I am having same issue here I have

<svg
      id="svg-container"
      width="510"
      height="310"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 510 310"
    >
      <circle
        id="circle"
        cx={circleCenter.x}
        cy={circleCenter.y}
        r={r - 7}
        stroke="red"
        fill="blue"
        stroke-width="0"
      >
        <animate
          attributeType="XML"
          attributeName="r"
          to="100"
          dur="0.3s"
          begin="circle.click"
          fill="freeze"
        />
      </circle>
    </svg>

It works perfectly when clicking on desktop mode, but when I open the "browser inspector" and change the view to "mobile" the touch seems to not interact with the svg element (i.e: click -aka touch- event doesnt trigger the animation)

Well maybe is not same issue, as I am not using panzoom but similar :B