Currently, I am working with SVG image and JS. I want to change the text content in the SVG image. Actually, I already did it, but sometimes it's work, sometimes not. I use the function below:

function injectSVG(params) {

  var svgChart = document.getElementById("item-svg-chart").contentDocument;
  var text = svgChart.querySelectorAll('text.text-inject');
  for (var i = 0; i < text.length; i++) {
    text[i].textContent = params[i].toString().replace("*", "\xB0");
  }
}

with params content new text will be injected.

The code I used to show svg on html:

<div class="img-fluid">
  <object alt="svg-chart" id="item-svg-chart" data="{{ url_for('static', filename='img/rf-weldneck-flange.svg') }}"></object>
</div>

SVG images will change with the code below (I also query it):

  $('#third-select-card').on("change", function(e){
    var link = selectChange();
    $("#item-svg-chart").attr('data', link);
    var svgChart = document.getElementById("item-svg-chart");
    console.log(svgChart);
    var svgChart_1 = document.getElementById("item-svg-chart").contentDocument;
    console.log(svgChart_1);
  })

with svgChart show svg A (for example), svgChart_1 show contentDocument of svg A and link is the link to SVG image. But when query the svgChart and svgChart_1 I saw they were not the same svg contenDocument but it show the same image on my web (see attached images):

I don't know why it show the same image on web, but contentDocument is different. I think it's maybe the reason why I can not inject new text to svg.

Can someone help me explain why contentDocument is different ? And if the code I posted above is meaningless, please tell me there are anyway to change text content in svg image ?. This issue got me 2 days for it.

Thanks for help!