jqueryでsvgテキストを変更する

Question

私は今のところよく見える問題の答えを見つけようと2時間ほどインターネットを閲覧していますが、問題に適切な解決策が見つけられません。 私はsvgファイルのテキストを変更する必要があります。最終的にはブラウザのテキスト入力になるでしょう。私はforeignobjectを使用することができましたが、最終的には私の問題の解決策ではありません。なぜなら、私はそれをパスに合わせる必要があるからです。同様の質問へ

マイ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

text（）を使用すると効果があります。あなたの最初の行にエラーがあったために失敗した可能性があります。

いずれの場合でも、テキストを変更するさまざまな方法については、私の例を参照してください。 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>