User <object> SVG inside ion-scroll

1

Hi guys, I am trying to make this work but it simply does not.

I’m trying to fit a svg map inside my ion-scroll so I can drag the map and pinch to zoom. When I use the tag everything works fine but I need to use the <object> tag because I manipulate the map’s DOM.

Any tips?

<ion-scroll zooming='true' direction='xy'  style='width: 100%; height: 100%;' class='has-header'>
    <!-- <img src="map/pucrj.svg" alt="" /> -->
    <object id="E" type="image/svg+xml" data="map/pucrj.svg">
        <param name="src" value="map/pucrj.svg">
    </object>
</ion-scroll>

Any ideas? It simply does not scroll…like the drag action is not working.

2

Hmm, I couldn’t get it to work either, but there were no errors in the console.

Hmm, I’m not too sure what could be doing this.
What you could do is use a directive, see if that helps.

I’ll hit up the devs and try to find the issue

3

I did not understand what this direct actually do.

In fact, I only want to drag my svg around like an image. And pinch to zoom in or out. That’s the behave that I want. But I don’t know how to achieve this using instead of a tag.

I need the object tag because when the user hits a button on my interface, I draw a route inside my Map. Which can’t be achieved using the image tag.

4

I figure it out…

This is how I done:

<ion-scroll id='map' zooming='true' direction='xy'  style='width: 100%; height: 100%;' class='has-header'>
    <div style='position: absolute; top: 0; left: 0; width: 1368px;height: 1938px;'></div>
    <object id='mapObject' type="image/svg+xml" data="map/pucrj.svg">
        <param name="src" value="map/pucrj.svg">
    </object>
</ion-scroll>
2 Likes