getBoundingClientRect（）應該為SVG中嵌入的foreignObject XHTML元素返回什么？

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()是否應返回Web瀏覽器中屏幕對齊的邊界矩形的左/右/上/下？

或者它應該在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在我的（不正確的）錯誤報告中指出的那樣， CSSOM View Module規范說：

getClientRects()和getBoundingClientRect()方法提供有關元素相對於視口的邊框邊緣位置的信息。

...並且其他地方的規范明確將viewport定義為：

[...]由CSS 2.1定義，除非在http://www.w3.org/2000/svg名稱空間中有一個祖先的foreignObject元素，在這種情況下該元素充當視口和初始包含塊 。

總之，調用<svg>元素中<foreignObject>內的HTML元素的getBoundingClientRect()應該返回視口中元素的邊界框，專門用於HTML主體; 如果需要，由腳本編寫者將其從此轉換為屏幕空間。

getBoundingClientRect（）應該為SVG中嵌入的foreignObject XHTML元素返回什么？

問題描述

1 個解決方案

解決方案1
2 已采納 2011-11-08 03:28:47

getBoundingClientRect（）應該為SVG中嵌入的foreignObject XHTML元素返回什么？

問題描述

1 個解決方案

解決方案1 2 已采納 2011-11-08 03:28:47

解決方案1
2 已采納 2011-11-08 03:28:47