title: SVG background text is truncated in Safari and Chrome
body: <p>I am trying to render a svg image animated in my page. Image and text work fine but the background text is truncated when visualized in Safari and Chrome.</p>
  
  <p>The code I used in my html is the following</p>
  
  <pre><code>&lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1106px" height="auto" viewBox="0 0 1106 558" enable-background="new 0 0 1106 558" xml:space="preserve" preserveAspectRatio="xMinYMin none"&gt;
    &lt;g id="light_1"&gt;
         &lt;rect x="334" y="256" fill="#B60C05" width="726" height="58"/&gt;
         &lt;text transform="matrix(1.5 0 0 1 345 301)" fill="#FFFFFF" font-family="'Open Sans'" font-size="50" letter-spacing="3.333"&gt;SCULTURE - DESIGN&lt;/text&gt;
    &lt;/g&gt;
    &lt;g id="light_3"&gt;
        &lt;text transform="matrix(1.1 0 0 1 500 239)" fill="#B60C05" font-family="Work Sans" font-size="36" letter-spacing="1.5" font-weight="300"&gt;ALESSANDRA POLITI PAGNONI&lt;/text&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Here's a <a href="https://jsfiddle.net/elenapoliti/pfu85omt/3/" rel="nofollow noreferrer">fiddle</a> as an example (check how it appears if opened in Firefox or in Safari/Chrome) with css style.</p>
  
  <p>Anyone can help me in fixing the issue?</p>