CODEWITHSUNDEEP
javascriptjquerysvg
Gabriel Roda Eugen Bach
Gabriel Roda Eugen Bach

Reputation: 195

Change svg text with jquery

I have browsing the internet for a good 2 hours now, trying to find the answer to a problem that seemingly many had, but I can't find a proper solution to my problem. I need to change the text in an svg file, eventually it'll probably be a text input in the browser. I managed to use foreignobject, but ultimately that's not the solution to my problem, since I need to align it to paths.

My SVG

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 841.9 595.3" style="enable-background:new 0 0 841.9 595.3;" xml:space="preserve">
<style type="text/css">
</style>
<text transform="matrix(1 0 0 1 325.2451 144.7144)" class="st0 st1" id="id-of-the-text">hey</text>
 <text class="testText" id="testText" x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
  <text x="40" y="60">more text</text>
</svg>

And the failed attempts from answers to similar questions

$('#id-of-the-text').textContent = 'test';  
$("#id-of-the-text").text("new-value");  
$("#id-of-the-text")['innerText' in $("#id-of-the-text") ? "innerText" : "textContent"] = "some value";

It might be a stupid little mistake, otherwise I can't understand why nothing works for me.

Upvotes: 3

Views: 13202

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

Using text() should have worked. Maybe it failed because your first line had an error.

In any case, see my example for various ways to change text. Some require a mixture of jQuery and DOM features.

// Change the first text element
$('#id-of-the-text').text("hey 2");  

// Change the first text node of the second text element.
// Have to do this a little differently. We need to be careful that we only change
// the first text node and that we don't replace everything including the tspans.
$("#testText").get(0).firstChild.textContent = "Several lines 2";

// Change the first tspan
$("#testText tspan:nth-child(1)").text("First line 2");

// Change the second tspan
// Alternative to using "nth-child(2)":
$("#testText tspan").last().text("Second line 2");

// Change the last text element
$("svg text").last().text("more text 2");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 841.9 595.3" style="enable-background:new 0 0 841.9 595.3;" xml:space="preserve">
  <style type="text/css">
  </style>

  <text transform="matrix(1 0 0 1 325.2451 144.7144)" class="st0 st1" id="id-of-the-text">hey</text>
   <text class="testText" id="testText" x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
  <text x="40" y="60">more text</text>
</svg>

Upvotes: 4

Related Questions