使用 jQuery 更改 SVG 文本

Question

使用 jQuery 更改 SVG 文本

3

我已经在浏览器上花费了两个小时，试图找到一个好的答案来解决一个看起来很多人都遇到的问题，但我找不到一个合适的解决方案来解决我的问题。我需要改变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";

可能是一个愚蠢的小错误，否则我就不明白为什么什么都对我没用。

- Gabriel Roda Eugen Bach

1

你的ID是id-of-text，而不是testText。使用$('#id-of-the-text').text('New Text');可以起作用：https://jsfiddle.net/5gfcym6p/ - Yuriy Galanter

好的，有两个不同的文本元素，我指的是嵌套的那一个。尽管如此，我已经更改了它，结果与之前相同。 - Gabriel Roda Eugen Bach

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul LeBeau · Accepted Answer

使用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>