Updating the content of an SVG file in real-time

Question

Updating the content of an SVG file in real-time

I have an SVG file saved externally that includes the following code:

<g
     inkscape:groupmode="layer"
     id="layer9"
     inkscape:label="score"
     style="display:inline">
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        x="100.3568906"
        y="20.353357"
          id="text5833"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan5834"
          x="300.3568906"
          y="20.353357">Score</tspan></text>
  </g>

I am attempting to dynamically update the text "Score" using a JavaScript file, but so far I haven't been successful.

This is what I have tried:

var list = layerNamed('score').getElementsByTagName("g");
var textNode = document.createTextNode("Score:-1");
list.appendChild(textNode);

javascript css svg

Answer 1

Answer №1

If you want to modify the content of an existing text element, you can do so using the code snippet below.

document.getElementById('textid').textContent = "new text";

Check out this demo:

function updateText()
{
  document.getElementById('textid').textContent = "new text";
}

<svg height="30" width="200>
  <text id="textid" x="0" y="15" fill="red">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>

<button onclick="updateText()">Click here to update text</button>

Answer 2

If you want to modify the content of an existing text element, you can do so using the code snippet below.

document.getElementById('textid').textContent = "new text";

Check out this demo:

function updateText()
{
  document.getElementById('textid').textContent = "new text";
}

<svg height="30" width="200>
  <text id="textid" x="0" y="15" fill="red">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>

<button onclick="updateText()">Click here to update text</button>

Answer 3

Answer №2

It appears that there are a couple of issues in your code.

1) The line

layerNamed('score').getElementsByTagName("g")

retrieves all elements with the specified tag name and returns them as a NodeList object. Remember that NodeList indexes start at 0, so to access the first element, you should use the following code:

var list = layerNamed('score').getElementsByTagName("g")[0];

2) Instead of adding a new text element to update the content, you can directly access the text and tspan elements to modify the text content of tspan like this:

var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";

var list = document.getElementsByTagName("g")[0]; //document.getElementById("#layer9");
var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";

<svg height="30" width="800">
<g inkscape:groupmode="layer" id="layer9" inkscape:label="score" style="display:inline">
     <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="100.3568906" y="20.353357" id="text5833" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan5834" x="300.3568906" y="20.353357">Hello</tspan></text>

  </g>
</svg>

Answer 4

It appears that there are a couple of issues in your code.

1) The line

layerNamed('score').getElementsByTagName("g")

retrieves all elements with the specified tag name and returns them as a NodeList object. Remember that NodeList indexes start at 0, so to access the first element, you should use the following code:

var list = layerNamed('score').getElementsByTagName("g")[0];

2) Instead of adding a new text element to update the content, you can directly access the text and tspan elements to modify the text content of tspan like this:

var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";

var list = document.getElementsByTagName("g")[0]; //document.getElementById("#layer9");
var textNode = list.getElementsByTagName("text")[0].children[0];
textNode.textContent = "New Text";

<svg height="30" width="800">
<g inkscape:groupmode="layer" id="layer9" inkscape:label="score" style="display:inline">
     <text xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" x="100.3568906" y="20.353357" id="text5833" sodipodi:linespacing="125%"><tspan sodipodi:role="line" id="tspan5834" x="300.3568906" y="20.353357">Hello</tspan></text>

  </g>
</svg>

Answer 5

Answer №3

Here is a simple example demonstrating how to update text content using both vanilla JavaScript and jQuery:

changeContent("textEl", "New text");
//changeContentWithJQuery("textEl", "Using jQuery now"); // uncomment this line to see jQuery in action

function changeContent(elementId, newText) {
  var element = document.getElementById(elementId);
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
  element.appendChild(document.createTextNode(newText));
}

function changeContentWithJQuery(elementId, newText) {
  $("#" + elementId).text(newText);
}

You can view the code in action on jsFiddle: https://jsfiddle.net/8hcw4j9u/2/

Answer 6

Here is a simple example demonstrating how to update text content using both vanilla JavaScript and jQuery:

changeContent("textEl", "New text");
//changeContentWithJQuery("textEl", "Using jQuery now"); // uncomment this line to see jQuery in action

function changeContent(elementId, newText) {
  var element = document.getElementById(elementId);
  while (element.firstChild) {
    element.removeChild(element.firstChild);
  }
  element.appendChild(document.createTextNode(newText));
}

function changeContentWithJQuery(elementId, newText) {
  $("#" + elementId).text(newText);
}

You can view the code in action on jsFiddle: https://jsfiddle.net/8hcw4j9u/2/

Updating the content of an SVG file in real-time

Answer №1

Answer №2

Answer №3

Similar questions

Changing links dynamically through jQuery

Is there a way to generate a button that displays the subsequent 5 outcomes from the database without navigating away from the current

Angularjs ng-class directive: remove a class when a different condition becomes true

HTML5's video tags are capable of displaying video content without audio playback functionality

Getting Permission in the latest Facebook JavaScript SDK: A Step-by-Step Guide

multiple event listeners combined into a single function

When calling a function within a for loop, the function receives the final value instead of iterating through the sequence

Having trouble finding the sum of values in an array using the Reduce method?

Guidelines for creating a navigation item using Bootstrap's CSS

I am encountering a problem with the app.patch() function not working properly. Although the get and delete functions are functioning as expected, the patch function seems to be

Tips for creating an inline list in MVC

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

The header logo disappears when the Vue.js id is added to the body

JavaScript commences in the htaccess file

Having trouble importing Angular flex-layout into my feature module

Error encountered in VUE JS 3: The function vue.initDirectivesForSSR is not recognized as a valid function

Transforming the header of a table in a CSV file into a schema field

Unusual behavior observed with Chrome image resizing

Operate a seamless resizing of container divs within the Bootstrap carousel to avoid any sudden "jump" in size adjustments

Performing a file selection in Cypress without the presence of an input element in the DOM