Question

嗨，下面是我的svg部分

<g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label">
    <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect>
    <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text>
</g>

在这里，我需要获取文本“测试内容”并将其替换为一些数字，我该如何使用javascript进行此操作？

任何帮助都将不胜感激。

Answer 1

正如您所提到的，有多个g标记，您可以使用document.querySelectorAll('g text')[1];获取text标记内第二个g的元素引用，然后使用textContent。（根据OP评论更新答案）

＆＃13;

var textElem = document.querySelectorAll('g text')[1];
textElem.textContent =  1111;

＆＃13;

<g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label">
    <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect>
    <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text>
</g>
<br/>
<g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label">
    <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect>
    <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text>
</g>
<br/>
<g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label">
    <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect>
    <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text>
</g>

＆＃13;

Answer 2

这可以帮到你，看看：D

＆＃13;

function changeText(){
  var svg = document.querySelector('g');
  svg.lastElementChild.innerText = "hello World"
}
changeText();

＆＃13;

<g transform="translate(86.91003147398621,-21.306040772755345)" class="nv-label">
    <rect style="fill-opacity: 0; stroke-opacity: 0;"></rect>
    <text dy=".35em" style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: start;">Test Content</text>
</g>

＆＃13;

Answer 3

我认为许多其他答案都忽略了给你如何建议设置您的SVG，以便以后轻松找到您的文本元素。

通常的做法是给text元素一个id属性。之后您可以通过致电getElementById()找到它。

＆＃13;

var textElem = document.getElementById("mytext");
textElem.textContent = "1234";

＆＃13;

<svg>
  <text id="mytext" y="100">Test Content</text>
</svg>

＆＃13;

还有其他方法可以标记您的元素。你可以通过class：

来完成

＆＃13;

var allTextElems = document.getElementsByClassName("mytext");
for (var i=0; i< allTextElems.length; i++) {
  allTextElems.item(i).textContent = "1234";
};

＆＃13;

<svg>
  <text class="mytext" y="75">Test Content</text>
  <text class="notmytext" y="100">Test Content</text>
  <text class="mytext" y="125">Test Content</text>
</svg>

＆＃13;

或者您可以使用data属性执行此操作：

＆＃13;

var allTextElems = document.querySelectorAll('[data-key=mytext]');
allTextElems.forEach(function(item) {
  item.textContent = "1234";
});

＆＃13;

<svg>
  <text data-key="mytext" y="75">Test Content</text>
  <text data-key="notmytext" y="100">Test Content</text>
  <text data-key="mytext" y="125">Test Content</text>
</svg>

＆＃13;

如果由于某种原因无法修改SVG，那么下一个明显的解决方案是使用DOM树中相对于其他元素的位置来定位文本元素。

＆＃13;

// Select the first text element in the group which has class="two"
var textElem = document.querySelector("g.two text:first-child");
textElem.textContent = "1234";

＆＃13;

<svg>
  <g class="one">
    <text y="50">Text in group 1</text>
  </g>
  <g class="two">
    <text id="mytext" y="100">Test Content</text>
    <text y="125">Other text in group 2</text>
  </g>
</svg>

＆＃13;

如果您不知道目标文本在文件中的位置，您只知道文本包含的内容，那么您需要搜索所有文本元素以找到具有正确文本的文本元素。

＆＃13;

// Select the SVG we want to search
// (This is an example of what you would need to do if you had more than one svg on the page)
var mySvg = document.querySelector("#mysvg");
// Find all the text elements in that svg
var allTextElems = document.querySelectorAll("text");
// Check all the text elements found, and if they contain our text
// then replace it with the new text.
allTextElems.forEach(function(item) {
  if (item.textContent === "Test Content") {
    item.textContent = "1234";
  }
});

＆＃13;

<svg id="mysvg">
  <g class="one">
    <text y="50">Text in group 1</text>
  </g>
  <g class="two">
    <text id="mytext" y="100">Test Content</text>
    <text y="125">Other text in group 2</text>
  </g>
</svg>

＆＃13;

抓取文本标记内容并使用javascript将其替换为自定义文本

3 个答案: