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功能。

＆＃13;

// 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");

＆＃13;

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

＆＃13;

用jquery更改svg文本

1 个答案: