web-dev-qa-db-ja.com

jQueryを使用してSVGパスの境界ボックスを取得する

JqueryのsvgパスのgetBBox（）を取得したいのですが。私はこのようにしてみました

$("#"+ path id)[0].getBBox() -> returns x=0,y=0,width=0,height=0

SVG要素へのパスを追加しました。 SVGで他の要素を試しました。たとえば、テキストノードの場合、境界ボックスの値を返します。

SVGでパスの境界ボックスを計算するにはどうすればよいですか？

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M -2390.2 -125.8888888888889 L 0 0 M 0 0 L 251.60000000000002 -45.77777777777778 M 251.60000000000002 -45.77777777777778 L 503.20000000000005 -11.444444444444445 M 503.20000000000005 -11.444444444444445 L 629 -183.11111111111111 "/>
svgjquery-svg
12
SivaRajini

getBBoxはネイティブSVGメソッドであり、jqueryの一部ではないため、次のように記述する必要があります。

$("#"+ path id)[0].getBBox()

例

コードの例でゼロ以外の値とゼロの値を取得している場合は、ここに示していない何か他のことが起こっているはずです。

最も可能性の高い原因は、パスが<defs>の子であることです。つまり、パターンまたはクリップパスで間接的に使用しているだけであるか、表示スタイルがnoneの場合、レンダリングされません。境界ボックスはありません。

12
Robert Longson

WebkitのgetBBox()ネイティブ実装はバグが多く、 バグトラッカーはこちら を見つけることができます。実際に修正されました今

解決策は、そのような問題を計算するための独自のアルゴリズムを持つSVGライブラリを使用することです。そのうちの1つは Raphael.js です。

Raphael'selement.getBBox() を使用できます。これは、ネイティブgetBBox()と同じことを行います。

10
Nik Kyriakides

私もJQuery構文をうまく機能させるのに苦労しています。これが返されたncaught TypeError：Object [object Object] has no method 'getBBox'：

console.log($("#testtext").getBBox().width);

...配列のインデックスを省略したため（@Christian Vielmaに感謝）。

ただし、標準のJavascriptが機能し、（私の場合）RECTの幅をChromeコンソールに表示できました。

console.log(document.getElementById("testtext").getBBox().width);

代わりに試してみてください。

6
MSC

Element.getBoundingClientRect（）を試してください。これはhtml DOMからのものですが、SVG要素で動作します（あまり変換しません）。

0
OsamaBinLogin

確認することの1つは、svgがDOMに追加され、切り離されないことです。また、SVG要素が

0
yeahdixon