从 svg 对象的角度更改文本值

Question

我需要从svg对象获取和设置文本。

这是我的 SVG 对象

<svg id="svgObject" class='outer' width='500' height='225'>
<text class='graph-title' x='45' y='100'>I WANT TO CHANGE THIS TEXT</text>
</svg>
<p id="svgContentText"></p>

我试试这个，但我有[object Text]

let svgObj = document.getElementById('svgContentText');
let svg = document.getElementById('svgObject');
let oldText = svg.childNodes[0];
svgObj.innerHTML = ("SVG font-size is " + oldText);

Answer 1

只需在文本中输入一个id：

<svg id="svgObject" class='outer' width='500' height='225'>
<text id="text" class='graph-title' x='45' y='100'>I WANT TO CHANGE THIS TEXT</text>
</svg>

然后在JS文件中，简要的Mi Perro只是获取文本值的id保存它，然后更改它

let svg = document.getElementById("text");
let oldText = svg.innerHTML;
svg.innerHTML = "SVG font-size is " + oldText;

或者，如果您想通过儿童访问：

let svg = document.getElementById("svgObject");
let oldText = svg.children[0].innerHTML;
console.log(oldText);
svg.children[0].innerHTML = "SVG font-size is " + oldText;
document.getElementById('svgContentText').innerHTML = oldText;

请参阅代码笔：

https://codepen.io/jppgit/pen/VwvGQrB

良好的共鸣！