title: <Text> tag in svg not rendering correctly in chrome
body: <p><strong>Background</strong></p>
  
  <ol>
  <li><p>The application UI is built in icefaces </p></li>
  <li><p>As iceface works, a piece of javascript code is retrieved from the server, this code is run on the browser to update the svg element.Hence, svg is rendered
  dynamically for the 1st time</p></li>
  </ol>
  
  <p><strong>Problem</strong></p>
  
  <p>Issue is with the <code>&lt;text&gt;</code> tag in the svg not rendering properly. The <code>&lt;text&gt;</code> tag does not follow the positions x,y as mentioned in its attributes. Instead it just stays at the origin(0, 0) because of which each of the text within different <code>&lt;text&gt;</code> tag overlaps over each other.</p>
  
  <p><a href="https://i.stack.imgur.com/Al7DR.png" rel="nofollow noreferrer">First rendering looks like this</a></p>
  
  <p>However, the text gets positioned correctly automatically in the following cases:-</p>
  
  <ol>
  <li>The size of the browser window is changed </li>
  <li>Any of the elements in
  the <code>&lt;svg&gt;</code> tag is altered via the developer tool</li>
  </ol>
  
  <p>From the above 2 points it appears that the svg itself is not rendered properly at the first load(dynamically). As soon as we do any of above 2 points chrome renders the svg correctly.</p>
  
  <p><a href="https://i.stack.imgur.com/syN41.png" rel="nofollow noreferrer">Resizing windows/Altering any svg element in developer tool automatically fixes it to this</a></p>
  
  <p><strong>Queries</strong></p>
  
  <ol>
  <li>Is there a way to force reload svg in chrome?</li>
  <li>What could be an alternative to using <code>&lt;text&gt;</code> tag for positioning text in the svg?</li>
  <li>Any other solutions? </li>
  </ol>
  
  <p>NOTE:-The same scenario works perfectly in Firefox !</p>
  
  <p>Although the full svg code is quite big but here is the HTML piece responsible for rendering the svg text</p>
  
  <pre><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  height="100%" minwidth="1" width="100%" x="0" y="0"&gt;
      &lt;g transform="matrix(57.22751322751323,0,0,57.22751322751323,360.6538835978836,26.883768888888916)"&gt;
          &lt;g&gt;
              &lt;text font-size="1" style="font-family:'Arial', sans-serif; stroke:none; fill:black;" transform="scale(0.048895)" x="-10.779220779220779" y="2.1136363636363633"&gt;
                  &lt;tspan x="-10.779220779220779"&gt;Overlapping text&lt;/tspan&gt;
                  &lt;tspan dy="1em" x="-10.779220779220779"&gt;Overlapping text&lt;/tspan&gt;
              &lt;/text&gt;
              &lt;text font-size="1" style="font-family:'Arial', sans-serif; stroke:none; fill:black; font-weight:bold;" transform="scale(0.08001)" x="-6.587301587301588" y="-0.75"&gt;
                  &lt;tspan x="-6.587301587301588"&gt;Overlapping text&lt;/tspan&gt;
              &lt;/text&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>