javascriptsvgtextinnertext

grab svg text value with javascript

I have this javascript...

window.writeText = function(form) {
  var text;
  form.catnumber2.value = "PING";
  text = document.getElementByName('cat2Number').innerHtml;
  return alert(text);
};

But I get no alert box as expected.

The svg does not show up when I view source via view/developer/view source (I'm in chrome) BUT when I use view/developer/developer tools....I can see the following svg....

<svg height="594">
    <g ID="MasterG">
        <text name="cat2Number">"$1234"</text>
    </g>
</svg>

Any idea what I'm doing wrong? Why is it I can't see the svg code in "view source" but I can in "developer tools" ? Is that the cause of my problem? Is that why my alert box won't "alert"?

Solution

  • After a couple of seconds of googling and finding this https://stackoverflow.com/a/9602772/1217408

    I created this JSFiddle example of using textContent: http://jsfiddle.net/hVyTJ/1/

    The original http://jsfiddle.net/hVyTJ/ uses standard DOM traversal to get to the text element from the root SVG element. While the update targets the text element directly by ID.

    As for finding attribute values you can use getAttributeNS as described here: http://www.carto.net/svg/manipulating_svg_with_dom_ecmascript/

    EDIT:

    As pointed out by Phrogz, a simple getAttribute call is often sufficient. Read the comment for more details.