3

This is a follow up to a question asked before at: How to access SVG elements with Javascript However, the solution does not seem to work for me. I am testing on the latest version of Chrome. I have a map of the US as an SVG file, which I have downloaded on my machine and made some changes to the xml code.

I have the svg embedded using the object tag and assigned an id of "USAsvg" and am proceeding with baby-steps first. For a button onclick event I am executing the following code without success. Here 'CA' is a state declared using the path tag within the svg file.

var a = document.getElementById('USAsvg');
var svgDoc = a.contentDocument; 
var delta = svgDoc.getElementById('CA');

alert(delta.value);
Community
  • 1
  • 1
Johnny Basu
  • 31
  • 2
  • Have you seen this? : http://www.carto.net/papers/svg/manipulating_svg_with_dom_ecmascript/ – jerluc Jan 22 '11 at 05:55
  • 1
    You should describe in more detail what isn't working. Are you seeing any `alert` at all? What's it contain? Any errors in the JavaScript console? Chrome comes with a rich set of development tools, including a console and a debugger, so you don't have to use `alert()` - are you using that already? If not, you **really should.** – Matt Ball Jan 22 '11 at 05:57
  • I have, I am trying to access the SVG elements from outside the file upon embedding. If my current approach proves unsuccessful, I might have to use this approach. – Johnny Basu Jan 22 '11 at 05:59
  • Other useful resources: [Mozilla Dev Center](https://developer.mozilla.org/en-US/) is an excellent source of all things JavaScript. See: [SVG](https://developer.mozilla.org/En/SVG), [SVG in HTML Introduction](https://developer.mozilla.org/en/svg_in_html_introduction), and [Inter-document scripting: referencing embedded](https://developer.mozilla.org/en/SVG/Scripting#Inter-document_scripting.3a_referencing_embedded_SVG). – Matt Ball Jan 22 '11 at 06:03
  • Matt, I used your suggestions and tried debugging the javascript under Chrome Developer tools. Seems like the contentDocument itself is "undefined". thanks for the pointer. – Johnny Basu Jan 22 '11 at 06:38

1 Answers1

1

this works in the latest chrome, load the SVG into your DOM directly, then manipulate it as if it were a normal html node, the html() function in jQuery does not work, use text() instead.

$('.your_div_for_svg').load('svg/file.svg', function(){
      $('#some_textnode_w_id_within_svg').text('Hello word');
});
visualex
  • 736
  • 12
  • 17