Question

考虑一份特殊群体文件,如此......

<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>

......

console.log( document.getElementById( foo ).getBoundingClientRect() );

通知:

The body of the HTML document is offset in the SVG, and rotated, and skewed.
The SVG is scaled so that 1 SVG unit is not the same as 1 screen pixel.

是否应在网上浏览器中将屏幕配对的束缚线左侧/右边/上下层/下游接回getBoundingClientRect(?

Or should it return the coordinates of the object within the context of the body, and leave it up to the user to transform from the foreignObject space into the screen pixels for the scaled/rotated/skewed SVG?

I m not so much interested in your opinion of how this should behave as a clear interpretation of how the specifications involved dictate that this shall behave.

下面是这方面的一个简单例子,显示“ Chrome”与“ Firefox”一样,后者:。

http://bugs.webkit.org/show_bug.cgi?id=71819“rel=”nofollow。

Answer 1

如Boris Zbarsky在 my (incorrect) bug report,。缩略语:

。

…and the specification elsewhere explicitly defines viewport as:

[...] defined by CSS 2.1 unless there is an ancestor foreignObject element in the http://www.w3.org/2000/svg namespace in which case that element acts as viewport and initial containing block.

In summary, getBoundingClientRect() called on an HTML element inside a <foreignObject> in an <svg> element should return the bounding box of the element within the viewport specifically for the HTML body; it is up to the scripter to transform from this into screen space, if desired.

友情链接