动态更改SVG文件的文本 [英] Dynamically change text of SVG file

问题描述

我有包含代码的外部SVG文件

I have external SVG file which contains the code

<g
     inkscape:groupmode="layer"
     id="layer9"
     inkscape:label="score"
     style="display:inline">
     <text
        xml:space="preserve"
        style="font-style:normal;font-weight:normal;font-size:22.5px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
        x="100.3568906"
        y="20.353357"
          id="text5833"
        sodipodi:linespacing="125%"><tspan
          sodipodi:role="line"
          id="tspan5834"
          x="300.3568906"
          y="20.353357">Score</tspan></text>

  </g>

我需要从JS文件动态更改文本Score，我已经尝试过但不能动态更改文本. 我试过的是:-

I need to dynamically change the text Score from JS file, i already tried but not able to change the text dynamically. what i tried is:-

var list = layerNamed('score').getElementsByTagName("g");
var textNode = document.createTextNode("Score:-1");
list.appendChild(textNode);

推荐答案

您可以使用以下代码更改现有text元素内的文本.

You can use the following code to change the text inside existing text element.

document.getElementById('textid').textContent = "new text";

下面的工作示例:

function changeText()
{
  document.getElementById('textid').textContent = "new text";
}

<svg height="30" width="200">
  <text id="textid" x="0" y="15" fill="red">I love SVG!</text>
  Sorry, your browser does not support inline SVG.
</svg>

<button onclick="changeText()">Click here to change text</button>

这篇关于动态更改SVG文件的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！