getBoundingClientRect（）はSVGに埋め込まれたforeignObject XHTML要素を返しますか？

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

... ...

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

をこのようなSVGドキュメントを考えてみましょう...と、このようなJavaScriptコードことに注意してください：HTMLドキュメントのbodyはSVGにオフセットされて

回転させて斜めにします。
SVGは1 SVG単位が1画面ピクセルと同じにならないようにスケーリングされます。

getBoundingClientRect()は、画面の境界にある境界の四角形の左/右/上/下をWebブラウザで返しますか？

bodyのコンテキスト内でオブジェクトの座標を返して、foreignObjectのスペースを拡大/縮小/回転/歪みSVGのスクリーンピクセルに変換する必要がありますか？

これは、この仕様がどのようにこのをとするかを明確に解釈するために、これがどのように動作するべきかについて、あなたの意見にはあまり興味がありません。

はここでFirefoxが後者を行いながらクロム前者を行うことを示し、この単純な例です：http://phrogz.net/SVG/html_location_in_svg_in_html.xhtml

編集：ここでは、このテストケースのクローム/ Safariの間違った取り扱いを説明Webkitのバグです：https://bugs.webkit.org/show_bug.cgi?id=71819

出典

2011-11-07 Phrogz

my (incorrect) bug reportにボリスZbarskyで述べたように、CSSOM View Module specは言う：

getClientRects()およびgetBoundingClientRect()メソッドは、ビューポートを基準にした要素のボーダーボックスエッジの位置に関する情報を提供します。

...と指定elsewhereが明示的としてビューポートを定義：その場合、そのhttp://www.w3.org/2000/svg名前空間内の祖先foreignObject要素がない限り、CSS 2.1によって定義された[...]

要素はビューポートとして機能し、ブロックを含む初期値として機能します。要約する

、<svg>要素で<foreignObject>内部HTML要素で呼び出さgetBoundingClientRect()は、具体的にはHTMLの本体のためにビューポート内の要素の境界ボックスを返すべきです。必要に応じてこれをスクリーンスペースに変換するのはスクリプタに任されています。

出典

2011-11-08 03:28:47 Phrogz

getBoundingClientRect（）はSVGに埋め込まれたforeignObject XHTML要素を返しますか？

答えて

関連する問題