2

ブラウザ間でシェイプのバウンディング ボックスに一貫性がないことに気付きました。これを含むSVGを作成しました：

<rect x="100" y="100" width="100" height="100" id="rect" fill="gray" stroke="black" stroke-width="2px" />
<path d="M100 100 L100 200 L200 200 L200 100 z" id="path" fill="red" stroke="white" stroke-width="2px"/>

Chrome と IE で境界ボックス (element.getClientBoundingBox) を取得しようとすると、サイズは w=100、h=100、位置は両方の形状で x=100、y=100 です。しかし、最初の形状の FireFox では、w=102,h=102 (サイズ + ボーダー) と x=99,y=99 を取得しています。パス上の値はさらに奇妙です - w=116,h=116, x=92,y=92.

これは Firefox のバグですか? Bugzilla に投稿する必要がありますか? SVG仕様はそれについて何か言っていますか? （これに関する情報は見つかりませんでした）。この問題を回避する方法を知っている人はいますか? 特にパス要素は、私にとっては予測不可能です。

4

1 に答える 1

5

Firefox は境界ボックスにストロークを含めます。これが正しいことを反映するために、仕様を変更するように依頼しました。

パスの場合、サイズが大きすぎます。これは、先のとがった形状のサイズを見積もるのが複雑なため、ストロークされた形状の実際のサイズをうまく計算できないためです。上限を設定するために stroke-miterlimit を使用しますが、それほど大きくはありません。

SVG DOM getBBox メソッドを使用すると、シェイプのストロークが除外され、塗りつぶしの寸法が得られます。

于 2012-09-10T16:16:21.497 に答える