access SVG elements via Javascript

Question

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);

Answer 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');
});