1. ホーム
  2. svg

[解決済み] getBBox() SVGRectはどのように計算するのですか?

2022-02-12 07:21:14

質問

を持っています。 g 要素には、1つまたは複数の path 要素で構成されています。で述べたように 別問題 を拡大縮小し、平行移動しています。 g 要素を計算することで transform 属性は、キャンバスの別の部分のグリッドに収まるようにします。

計算は、2つの矩形の差分である getBBox() から g 要素とグリッドを囲む矩形で構成されます。

ここで質問です -- 変換を行った後に g 要素を呼び出し getBBox() をもう一度表示します。 がない場合 を削除して transform . を考慮せずに計算したように見える。 transform . 変更を反映させることを期待したのですが。この動作はSVGの仕様と一致しているのでしょうか? 変換された矩形のバウンディングボックスを取得するにはどうすればよいのでしょうか?

ちなみに、これは Firefox 4 で動作する HTML 5 ドキュメントです(違いがあれば)。

更新:どうやらこの動作は、かなり明確に仕様違反のようです。本文より ここw3cでは :

SVGRect getBBox()

現在のユーザ空間のタイトバウンディングボックス(つまり、含まれるすべてのグラフィックス要素のジオメトリに 'transform' 属性があればそれを適用した後、ストローク、クリッピング、マスキング、フィルタ効果を除いたもの)を返す。) getBBox は、要素がまだレンダリングされていない場合でも、メソッドが呼び出された時点の実際のバウンディングボックスを返さなければならないことに注意すること。

私はこれを正しく読んでいますか?もしそうなら、これはFirefoxが使っているSVG実装のエラッタのようです。もし誰かがその場所を教えてくれるなら、バグレポートを提出します。

解決方法は?

あなたが見ている動作は正しく、仕様と一致しています。 変換が適用されると、bbox は "カレント ユーザー ユニット" つまり、カレント ユーザー空間で計算されます。したがって、要素に対するトランスフォームの結果を確認したい場合は、親ノードなどの bbox を参照する必要があります。 これは少しわかりにくいのですが、次のページでよりよく説明されています。 SVG Tiny 1.2のSVGLocatableに関する仕様書 その中には、それが何をするものなのかを明確にするための例がたくさん含まれています。