[解決済み] getBBox() SVGRectはどのように計算するのですか?
質問
を持っています。
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に関する仕様書 その中には、それが何をするものなのかを明確にするための例がたくさん含まれています。
関連
-
[解決済み】SVGオブジェクトの拡大縮小とミラーリング
-
[解決済み] d3.jsでノードのダブルクリックイベントを作成するにはどうすればよいですか?
-
[解決済み] getBBox() SVGRectはどのように計算するのですか?
-
[解決済み] SVGのストロークが一方向のみ
-
[解決済み] SafariでSvg画像要素が表示されない
-
[解決済み】SVGファイル内のtransformを削除する方法
-
[解決済み] SVG ルート要素のデフォルトの背景色
-
[解決済み] SVGの円弧パスによる円形描画
-
[解決済み] SVG における text 要素の垂直アライメント
-
[解決済み] SVGユースタグとReactJS
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】SVGオブジェクトの拡大縮小とミラーリング
-
[解決済み] d3.jsでノードのダブルクリックイベントを作成するにはどうすればよいですか?
-
[解決済み] getBBox() SVGRectはどのように計算するのですか?
-
[解決済み] SVGのストロークが一方向のみ
-
[解決済み] ImageMagickでSVGをPNGに変換する方法は?
-
[解決済み】PNG画像をSVGに変換する方法は?[クローズド]
-
[解決済み】円弧(のSVGパス)を計算する方法)
-
[解決済み】SVGファイル内のtransformを削除する方法
-
[解決済み] SVG における text 要素の垂直アライメント
-
[解決済み] svgのx属性とdx属性の違いは何ですか?