Question

我的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上，整个文本内容都不在图像框架中。有谁知道为什么会发生这种情况？

Answer 1

删除xml:space="preserve"标记中的<svg>。

此外，您不需要x，y或enable-background属性，但它们与您的问题无关。

SVG文本在Chrome上与Firefox显示不同

1 个答案: