Question

问题：

以下SVG

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <rect id="rect2993" x="20" y="40" width="1000" height="300" style="fill:#aa0000" />
<!--
  <text x="20" y="40">Example SVG text 1</text>
-->

  <text id="txtErrorTitle" x="20" y="40" style="font-size:40px;font-style:normal;font-weight:normal;letter-spacing:0px;word-spacing:0px;fill:#aa0000;fill-opacity:1;stroke:none;font-family:Sans;"
   xml:space="preserve" >

        <tspan id="tspan2994" x="10" y="67" style="fill:#FF00FF">
          System.Web.HttpException
        </tspan>

        <tspan id="tspan29914" x="10" y="100" style="fill:#FF00FF">
            System.Web.HttpException
        </tspan>

    </text>

  <circle cx="20" cy="40" r="10" stroke="black" stroke-width="1" fill="yellow" fill-opacity="0.75" />
  <circle cx="1020" cy="340" r="10" stroke="black" stroke-width="1" fill="yellow" fill-opacity="0.75" />


  <circle cx="10" cy="67" r="10" stroke="black" stroke-width="1" fill="orange" fill-opacity="0.75" />

  <text x="1020" y="340" fill="red" transform="rotate(45 1020,340)">I am rotated SVG text</text>


  <foreignObject class="node" x="46" y="422" width="200" height="300">
    <body xmlns="http://www.w3.org/1999/xhtml">
      <div>
        The quick brown fox jumps <font style="color: hotpink;">over</font> the lazy dog. <br />Pack my box with
        five dozen liquor jugs
      </div>
    </body>
  </foreignObject>

</svg>

在IE中呈现，就像我期望的那样：

SVG Internet Explorer

然而，在Chrome和FireFox中，它呈现如下：

Firefox / Chrome

当我发布这个问题时，我刚刚意识到外来对象没有在IE中呈现，这并不奇怪，因为IE一直是错误的并且落后。但我的实际问题不是外来物。

我的实际问题是：
为什么文本“System.Web.HttpException”的位置不在Chrome / FireFox中的位置（10,67）和（10,100）？
这是Chrome / FireFox渲染中的错误吗？
或者我错过了一些SVG明智的东西，并且IE再次出现了错误？

我觉得特别奇怪的是第二个tspan是appx。在前一个tspan元素的右边10。几乎看起来tspan坐标是相对于前面的元素，但是奇怪的是没有Y偏移67.547935 ...

Answer 1

xml:space =“保留”会使空白计数，并且在第二个文本之前会有更多的空格。看起来IE不支持xml：space =“preserve”

SVG tspan渲染差异 - IE或Chrome中的错误或两者兼而有之？

1 个答案: