CODEWITHSUNDEEP
htmlcssgoogle-chromefirefoxsvg
user3033194
user3033194

Reputation: 1831

SVG text displaying differently on Firefox from Chrome

I have a svg tag in my HTML. A series of texts have to be displayed on top of the image. The HTML is given below:

  <svg version="1.1" id='couponSVG'
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      x="0px" y="0px" viewBox="0 0 129.5 187.2" enable-background="new 0 0 129.5 187.2" xml:space="preserve">
      <path fill="#3399ff" id='ticketPath'
          d="16.6V4.3H5.2v12.3c..."/>
      <text x="65" y="20">
          <tspan font-style="normal" font-weight="normal" font-size="8px" text-anchor="middle">Next available ticket</tspan>
      </text>
      <text x="65" y="48">
          <tspan font-style="normal" font-weight="normal" text-anchor="middle" id="queueNameSVG"></tspan>
      </text>
      <text x="64" y="58">
          <tspan font-size="8px" font-style="normal" font-weight="normal" text-anchor="middle" id="ticketDateSVG"></tspan>
      </text>
      <text x="66" y="122">
          <tspan font-size="64px" font-style="normal" font-weight="normal" text-anchor="middle" id="currentNumberSVG"></tspan>
      </text>
      <text x="66" y="155">
          <tspan class='btn btn-link' font-size="10px" font-style="normal" font-weight="normal" text-anchor="middle" id="showQueueInfo">info / details</tspan>
      </text>
  </svg>

Everything inside the text tags should appear on top of the image. This is working correctly on Chrome, but not on Firefox. On Firefox, the entire text contents are going out of the image frame. Does anyone know why this could happen?

Upvotes: 2

Views: 1672

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101938

Remove the xml:space="preserve" in your <svg> tag.

Also, you don't need the x, y or enable-background attributes, but they are unrelated to your problem.

Upvotes: 4

Related Questions