SVG различия в рендеринге tspan - ошибка в IE или Chrome или в обоих?

Вопрос:

Ниже 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" не находится на позиции (10,67) и (10,100) в Chrome/FireFox?
Это ошибка рендеринга в Chrome/FireFox?
Или я что-то упускаю из SVG, и IE снова глючит?

Что я нахожу особенно странным, так это то, что второй tspan - это appx. 10 справа от предыдущего элемента tspan. Кажется, что координаты tspan относятся к предыдущему элементу, но странно, что нет смещения по оси Y в 67,547935...

Источник

1 ответ

Решение

xml: space= "preserve" делает подсчет пробелов, и перед вторым текстом остается больше пробелов. Похоже, IE не поддерживает xml:space="preserve"

Источник
Другие вопросы по тегам