Actualmente, estoy trabajando con imágenes SVG y JS. Quiero cambiar el contenido del texto en la imagen SVG. En realidad, ya lo hice, pero a veces es trabajo, a veces no. Yo uso la siguiente función:

 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"); } }

con contenido de params se inyectará texto nuevo.

El código que usé para mostrar svg en 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>

Las imágenes SVG cambiarán con el siguiente código (también lo consulto):

 $('#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); })

con svgChart muestra svg A (por ejemplo), svgChart_1 muestra contentDocument de svg A y el link es el enlace a la imagen SVG. Pero cuando svgChart y svgChart_1 vi que no eran el mismo svg contenDocument pero mostraba la misma imagen en mi web (ver imágenes adjuntas):

No sé por qué muestra la misma imagen en la web, pero contentDocument es diferente. Creo que tal vez sea la razón por la que no puedo inyectar texto nuevo en svg.

¿Puede alguien ayudarme a explicar por qué contentDocument es diferente? Y si el código que publiqué anteriormente no tiene sentido, por favor dígame que hay formas de cambiar el contenido del texto en la imagen svg. Este problema me dio 2 días para ello.

¡Gracias por la ayuda!