title: Dynamically replace a text element of an svg object
body: <p>I would like to dynamically replace a text element of an svg object from a local text file. Below my files text et svg:           </p>
  
  <p>text file:</p>
  
  <pre><code>&lt;p id="p1"&gt;It works fine&lt;/p&gt;
  </code></pre>
  
  <p>text svg:</p>
  
  <pre><code>&lt;svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"&gt;
  &lt;rect id="svg_1" height="87" width="162" y="188" x="130" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="blue" fill="yellow"/&gt;
  &lt;text xml:space="preserve" text-anchor="start" font-family="serif" font-size="24" id="divA" y="240" x="313" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#000000" fill="blue"&gt; &lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>It works fine with the div or if I put the value, for example dog, for the element svg to modify. below mon fichier html:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
          var x = $("#divA").load("demo_test.txt #p1");
          var y = $("#div1").load("demo_test.txt #p1");
          document.getElementById("div1").textContent = y;
          var svg = document.getElementById("textsvg");
          var svgDoc = svg.contentDocument;
          svgDoc.getElementById("divA").textContent = "dog";                
           });               
      &lt;/script&gt;
   &lt;/head&gt;
  &lt;body&gt;
          &lt;div id="div1"&gt;&lt;h2&gt;PSU0 to PDU-A G0-2&lt;/h2&gt;&lt;/div&gt;
          &lt;object id="textsvg" width="600" height="480" type="image/svg+xml" data="essai.svg"&gt;&lt;/object&gt;     
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>However, when I put the variable y for the text element svg I have the message "[object Object]" instead of the message "It works fine". Below the html file:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(document).ready(function(){
          var x = $("#divA").load("demo_test.txt #p1");
          var y = $("#div1").load("demo_test.txt #p1");
          document.getElementById("div1").textContent = y;
          var svg = document.getElementById("textsvg");
          var svgDoc = svg.contentDocument;
          svgDoc.getElementById("divA").textContent = x;                
           });               
      &lt;/script&gt;
   &lt;/head&gt;
  &lt;body&gt;
          &lt;div id="div1"&gt;&lt;h2&gt;PSU0 to PDU-A G0-2&lt;/h2&gt;&lt;/div&gt;
          &lt;object id="textsvg" width="600" height="480" type="image/svg+xml" data="essai.svg"&gt;&lt;/object&gt;     
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>Can you help me.</p>
  
  <p>Thanks,</p>
  
  <p>B.R,</p>