Рассмотрим документ SVG, подобный этому ...
<svg viewBox="0 0 200 200" width="100%" height="100%" …>
<g transform="rotate(45) skewX(10)">
<foreignObject x="100" y="200" width="10" …>
<body xmlns="http://www.w3.org/1999/xhtml">
<p id="foo">Hi Mom!</p>
</body>
</foreignObject>
</g>
</svg>
… и код JavaScript, подобный этому…
console.log( document.getElementById('foo').getBoundingClientRect() );
Обратите внимание:
-
body документа HTML смещен в SVG, повернут и перекошен.
- SVG масштабируется таким образом, чтобы 1 единица SVG отличалась от 1 пикселя экрана.
Должен ли getBoundingClientRect() возвращать левый / правый / верхний / нижний край выравниваемого экрана ограничивающего прямоугольника в веб-браузере?
Или он должен возвращать координаты объекта в контексте body и предоставить пользователю возможность преобразовать пространство foreignObject в пиксели экрана для масштабированного / повернутого / перекошенного SVG?
Меня не очень интересует ваше мнение о том, как это должно вести себя, как четкая интерпретация того, как соответствующие спецификации диктуют, что должен вести себя.
Вот простой пример этого, показывающий, что Chrome выполняет первое, в то время как Firefox делает второе: http://phrogz.net/SVG/html_location_in_svg_in_html.xhtml
Редактировать : Вот ошибка Webkit, описывающая некорректную обработку Chrome / Safari этого теста: https://bugs.webkit.org/show_bug.cgi?id=71819