Html SVG文本在Firefox和Chrome上的显示方式不同

我的HTML中有一个svg标记。一系列文本必须显示在图像的顶部。HTML如下所示：

  <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>

下一张可用票
信息/详情

---

文本标记内的所有内容都应显示在图像顶部。这在Chrome上正常工作，但在Firefox上不正常。在Firefox上，整个文本内容都会从图像框中消失。有人知道为什么会发生这种情况吗？

删除

标记中的

xml:space=“preserve”

---

另外，您不需要

x

、

y

或

启用后台

属性，但它们与您的问题无关。

您介意通过stackoverflow、JSFIDLE或codepen将代码放入可运行的web代码段吗？这只会使流程加快一点，通常会吸引更多的人参与。