Question

考虑像这样的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() );

请注意：

HTML文档的body在SVG中偏移，旋转和倾斜。
缩放SVG，使1个SVG单位与1个屏幕像素不同。

getBoundingClientRect()是否应该在网络浏览器中返回屏幕对齐的边界矩形的左/右/上/下？

或者它应该在body的上下文中返回对象的坐标，并将其留给用户从foreignObject空间转换为缩放/旋转/的屏幕像素偏向SVG？

我对你对如何表现如何明确解释所涉及的规范明确指出

的看法并不感兴趣。 >
以下是一个简单的示例，显示Chrome执行前者而Firefox执行后者：http://phrogz.net/SVG/html_location_in_svg_in_html.xhtml

编辑：以下是描述Chrome / Safari对此测试用例的错误处理的Webkit错误：https://bugs.webkit.org/show_bug.cgi?id=71819

Answer 1

正如Boris Zbarsky在my (incorrect) bug report中指出的，CSSOM View Module spec说：

getClientRects()和getBoundingClientRect()方法提供有关元素相对于视口的边框边缘位置的信息。

...并且规范elsewhere明确将 viewport 定义为：

[...]由CSS 2.1定义，除非http://www.w3.org/2000/svg命名空间中有祖先foreignObject元素，在这种情况下，该元素充当视口，初始包含块

总之，getBoundingClientRect()调用<foreignObject>元素中<svg>内的HTML元素应返回视口内元素的边界框，专门用于HTML正文;如果需要，由脚本编写者将其从此转换为屏幕空间。

getBoundingClientRect（）应该为SVG中嵌入的foreignObject XHTML元素返回什么？

1 个答案: