1

I have an html page with an svg image embedded on it.

The SVG image is in a separate file. The SVG image references a javascript file which performs some image positioning functions.

The HTML page references the same javascript file and has a control for zooming into the image and resetting the image zoom and position, the functionality of this is implemented in the javascript file.

What I want to do is when the image is re positioned set a flag so that the I know when to show and hide the reset image button on the html page.

Because I have referenced this javascript file twice I have 2 separate versions running and hence the flag being set by the svg reference isn't the same flag being read by the html reference. The problem is that the image positioning is initiated by the svg image and the zooming is initiated by the html page.

Any ideas how I can solve this problem?

ee0jmt
  • 335
  • 1
  • 11
  • Why not, when the image reposition it self, talk straight with the html page and hide/show the button? – Asons Oct 14 '15 at 13:47
  • I did try that e.g. in the script handling the positioning I had var btn = document.getElementById('btnResetZoom'); but this come back as null. Not sure I need to access it differently because it is in the context of the svg image and I am trying to access a control on the html page. – ee0jmt Oct 14 '15 at 13:58

1 Answers1

1

May I suggest you do the following, let the script inside the SVG hide/show the button by calling the html page script.

The external script you access like this:

window.parent.toggleButton();

Then the button itself could be your "flag", if it is hidden or not.

I also found this code, which exist in the SVG file, where you can pass a reference to the SVG's clicked element to your html page:

function sendClickToParentDocument(evt)
{
    // SVGElementInstance objects aren't normal DOM nodes, 
    // so fetch the corresponding 'use' element instead
    var target = evt.target;
    if(target.correspondingUseElement)
        target = target.correspondingUseElement;

    // call a method in the parent document if it exists
    if (window.parent.svgElementClicked)
        window.parent.svgElementClicked(target);

}

Src: https://stackoverflow.com/a/10516723/2827823

Community
  • 1
  • 1
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Thanks! I modified the example here http://stackoverflow.com/a/10516723/2827823 and it works just the way I wanted it! – ee0jmt Oct 14 '15 at 14:32