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"?

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"?

• javascript
• svg
• text
• innertext

4 Answers 4

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.

For the ones who need only the displayed text, you can use the Selection API and its Range interface.

Simply using .textContent would also grab all text nodes that aren't displayed:

const svg = document.querySelector("svg");
console.log(svg.textContent);

<svg>  
  <defs>
    <desc>This text is not displayed, it shouldn't be grabbed</desc>
    <!-- same for all the new-lines in the markup -->
   </defs>
  <rect width="100%" height="100%" fill="red" />  

  <circle cx="150" cy="100" r="80" fill="green" />  

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>  

</svg>

Since SVG elements don't have an innerText property, we need to iterate ourselves over all text nodes, and check if when selecting them we get a BBox.

const svg = document.querySelector("svg");
const range = new Range();
let textContent = "";
const walker = document.createTreeWalker(svg, NodeFilter.SHOW_TEXT, null);
while(walker.nextNode() && walker.currentNode) {
  range.selectNode(walker.currentNode);
  if (range.getClientRects().length) {
    textContent += walker.currentNode.textContent;
  }
}
console.log(textContent);

<svg>  
  <defs>
    <desc>This text is not displayed, it shouldn't be grabbed</desc>
    <!-- same for all the new-lines in the markup -->
   </defs>
  <rect width="100%" height="100%" fill="red" />  

  <circle cx="150" cy="100" r="80" fill="green" />  

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>  

</svg>

you can invoke text() to return the text content of an svg:text element.

// assume svgCont is an svg element
var label = svgCont.append("svg:text").text("hello, world!");

// print the text content to the console
console.log( label.text() );

Without all the unnecessary discussion:

Grab your SVG element:

svg = document.getElementById("my_svg_id");

Grab the inner text from the SVG:

var text = svg.textContent