0

I embedded an svg within an html file like so: 

    <embed src="mysvg.svg" type="image/svg+xml" />

within the svg file is a rectangle with an id "lot1a," is there any way i can obtain coordinates of lot1a and save it in a variable and use it as coordinates for another svg file. My main problem is that, as Phrogz said, the host HTML (or SVG) cannot access the DOM of an embedded file. So what can i do?

Lendl Leyba
  • 2,287
  • 3
  • 34
  • 49
  • What sort of "access" do you want to have? What are you trying to accomplish? Visually show an SVG file as part of a web page and manipulate it with JavaScript? Do you need to save the changes? Is it a problem to embed the SVG data in the HTML page? – Phrogz Nov 30 '11 at 04:23
  • 1
    You think you've tried it before, or you have tried it? Please show us the code that you've tried. – robertc Dec 02 '11 at 13:10
  • When you say 'obtain the co-ordinates' do you want to get a position relative to the HTML element? Or do you want to insert something at the same location in the SVG? You realise the SVG is *scalable* vector graphics, the co-ordinates of an SVG image don't directly map to pixels like HTML co-ordinates do. – robertc Dec 03 '11 at 16:14

1 Answers1

4

This should work (in Firefox and Opera at least):

window.onload = function () {
    var svgel = document.getElementById('myembed');
    var svg;
    if (typeof svgel.getSVGDocument !== 'undefined') {
        svg = svgel.getSVGDocument();
    } else {
        svg = svgel.contentDocument;
    }
    var rect = svg.getElementById('lot1a');
    window.alert('x:' + rect.getAttribute('x') + ' y:' + rect.getAttribute('y'));
}

Chrome has a bug, but you could try these workarounds.

Community
  • 1
  • 1
robertc
  • 74,533
  • 18
  • 193
  • 177
  • But, what if the rect's code is: which x and y attribute will it get? it is because i used illustrator to draw the svg. – Lendl Leyba Dec 04 '11 at 10:54
  • @LeiLeyba You won't get any `x` or `y` attribute, because neither of those attributes exist. If you want to parse a path, use the code that was provided to answer your previous question. – robertc Dec 04 '11 at 18:34