I am using the same SVG file twice within the page. I'm trying to change a text inside SVGs based on the language of the page. With the code below, only the text in one SVG file changes and the other does not. What do I need to do to change it in all SVGs?
SVG code:
<text id="trading-text" class="text1" dx="0" dy="0" transform="translate(-100,0)" fill="#444351">DEFAULT TEXT</text>
JS Code:
let text = "CHANGE TEXT";
document.querySelector('[id="trading-text"]').innerHTML= text;
I could not get what you really mean by svg file. You also should not have more than one element with the same ID! So add a className like change-text to each text and use the following code:
const text = "CHANGE TEXT";
document.querySelectorAll('.change-text').forEach((node) => {
node.textContent= text
});
Good luck.