27

JavaScript から SVG の <path> の画面上の寸法を取得する必要があります。

SVG に「変換」または「スケーリング」(変換、スケーリング) がありません。唯一変更されたのは、SVG 内のすべての要素のサイズを変更する viewBox です。

myPath.getBBox() を使用していますが、viewBox を変更しても、返される幅は変わりません。

それで、このviewBoxとパスのサイズとの関係はどうなっているのだろうと思っています。たぶん、幅を計算する関数がありますか？

4

2 に答える 2

53

getBoundingClientRect()パスでメソッドを呼び出して、ディメンションを取得できます。オブジェクトを返しClientRectます：

var w = myPath.getBoundingClientRect().width;
var h = myPath.getBoundingClientRect().height;

getScreenCTM()呼び出された要素の現在の画面ピクセルで変換行列を返すメソッドもあります。仕様は言う：

[getScreenCTM()] 現在のユーザー ユニット (つまり、「transform」属性があれば適用後) から親ユーザー エージェントの「ピクセル」通知までの変換マトリックスを返します。[...] この要素がドキュメント ツリーにフックされていない場合は null が返されることに注意してください。

于 2011-08-11T21:53:35.500 に答える
2

まず第一にpath、幅を持つことはできないことに注意してください。コーディネートのセットです。ブラウザはその情報と描画方法を使用して、座標を接続し、目に見える形状を作成します。

次に、バウンディング ボックスは、SVG がレンダリングされたときのスナップショットです。そのため、サイズ変更時に幅が更新されません。

私が推測する回避策は、コンテナ要素の幅をSVG（divまたは他の何か）に取得することです。

一部のライブラリは、これを理解するためのユーティリティ メソッドを提供している可能性があります。

于 2011-08-11T21:22:45.350 に答える