回転したSVG要素の境界を画面のピクセルで取得しますか？

Question

HTML要素を正しくオーバーレイするために、スクリーンピクセル内の任意のSVG要素のバウンディングボックスを取得する最善の方法を見つけることを試みています。私のアプローチはこれまで.getBBox()と.getCTM()を使ってオブジェクトの境界ボックスと変換マトリックスを取得し、受け入れられた答えthis questionに記載されているように境界ボックスポイントに変換を適用することでした。あなたがここに私のテストを見ることができます

// get the element 
var el = $(selector)[0], 
    pt = $(selector).closest('svg')[0].createSVGPoint(); 

// get the bounding box and matrix 
var bbox = el.getBBox(), 
    matrix = el.getScreenCTM(); 

pt.x = bbox.x; 
pt.y = bbox.y; 
var nw = pt.matrixTransform(matrix); 
pt.x += bbox.width; 
pt.y += bbox.height; 
var se = pt.matrixTransform(matrix); 

// make a div in the screen space around the object 
var $div = $('<div class="bbox"/>').css({ 
     left: nw.x, 
     top: nw.y, 
     width: se.x - nw.x, 
     height: se.y - nw.y 
    }) 
    .appendTo('body'); 

は：http://jsfiddle.net/nrabinowitz/zr2jX/

しかし、テストが示すように、このアプローチは、回転変換に含まれてありますときに失敗するようだ - それはバウンディングボックスは、事前に計算されるようになります。回転するので、回転した境界ボックスの角を取得することはできません。

変換された要素の非回転バウンディングボックスを正しく計算するにはどうすればよいですか？

Answer 1

は、いくつかの研究の後、ここで私が見つけた最良のオプションは次のとおりです。

• getBoundingClientRect()は、近代的なブラウザではSVG要素のために働くようだ、と非常に高速であるが、結果は、プラットフォームから多少異なる場合がありプラットフォーム（特にストローク幅が大きい場合）。しかし、@ Sergiuのところでは、これは形状の変化を考慮しておらず、実際のパスやオブジェクトではなく回転したバウンディングボックスの境界を与えるので、非常に不正確になる可能性があります - see criticism here。例のフィドル：http://jsfiddle.net/stevenbenner/6M5zf/

• 私の主な目標は、境界の矩形の位置隅と中央を取得することで、最終的に私は回転バウンディングボックスを使用しても、回転の「本当の」バウンディングボックスに望ましいかもしれないと決めました形状。私は上記の方法を使ってこれを行い、N、S、E、Wの位置に可能な限り近づくように点をサイクリングすることができました。良い点だが、私は回転バウンディングボックスの基本的な境界を得ることができればa）は、それが最善だろうとhttp://jsfiddle.net/nrabinowitz/sPtzV/

Answer 2

スキューと回転がプロファイルの変更、またはどのように二つの軸に形状の突起が見えるが関与するので、私は、それが可能だとは思いません。

CTMの回転部分を無視する変換行列を計算できますが、新しいBBoxが回転した要素を引き続き囲むという保証はありません。たとえば、円がある場合、回転は境界ボックスの寸法には影響しません。一方、ベースパスとしてダイヤモンドがあり、それを45度回転させると、最終的に正方形になりますが、境界ボックスは異なります。元は対角線を測定していましたが、今はあなたは辺の長さを測定するバウンディングボックスを取得する必要があります。どのようにCTMを使用していても、形状の変化を考慮に入れることはできません。

したがって、回転は実際には非常に重要です。無視することはオプションではありません。ローカルの境界ボックスと変換マトリックスは、回転したときに形状プロファイルがどのように変化するかについては何も教えていません。