web-dev-qa-db-ja.com

SVGでパスの次元を取得する

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

SVGに「変換」または「スケーリング」（変換、スケーリング）がありません。変更されるのはviewBoxだけです。これにより、SVG内のすべての要素のサイズが変更されます。

MyPath.getBBox（）を使用していますが、viewBoxを変更しても、返される幅は同じままです。

したがって、このviewBoxとパスのサイズとの関係は何であるか疑問に思います。多分幅を計算する関数がありますか？

javascriptsvgbounding-box
23
jsgoupil

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

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

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

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

47
Spadar Shut

まず、pathに幅を設定することはできないことに注意してください。その一連の座標。ブラウザは、その情報を描画方法とともに使用して、座標を接続し、目に見える形状を作成します。

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

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

たぶん、 libraries のいくつかは、これを理解するためのユーティリティメソッドを提供するかもしれません。

2
Mrchief