Изменение svg-текста с помощью jquery

Question

У меня есть интернет в течение 2 часов, пытаясь найти ответ на проблему, которая, как казалось многим, была, но я не могу найти правильное решение моей проблемы. Мне нужно изменить текст в svg-файле, в конце концов это будет текстовый ввод в браузере. Мне удалось использовать foreignobject, но в конечном итоге это не решение моей проблемы, так как мне нужно выровнять его по пути.

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> 

И неудачные попытки из ответов на подобные вопросы

$('#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"; 

Это может быть глупая маленькая ошибка, в противном случае я не могу понять, почему ничего не работает для меня.

Answer 1

Использование текста() должно было сработать. Возможно, это провалилось, потому что в вашей первой строке была ошибка.

В любом случае, см. Мой пример для различных способов изменения текста. Некоторые требуют сочетания функций jQuery и DOM.

// 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>