svg bbox（）は常に値を返します。xとyは0ではない場合は0です。

Question

シェイプを描画するのにSVG.jsを使用しています。形状の1つは、半径線を持つ円でなければならないので、そのような振る舞いを得るには、 "g"要素の内側に楕円と線を使用しています。

トラブルは、私はそのグラムの要素を参照してバウンディングボックスを取得しようとするたびに、私はいつものように値を取得するには、次のとおりです。

{ 
x: 0, 
y: 0, 
width: widthOfBox, 
height: heightOfBox, 
cx: widthOfBox/2, 
cy: heightOfBox/2 
} 

xとyは以下である0

すべきではありません問題の要素は明らかに（0,0）ではないが、それが報告されているようだ。

<g id="MLG1008" stroke="#000000" stroke-width="2" fill="#000000" transform="translate(100 200)" width="993.3559281546569" height="993.3559281546569" x="12.963409423828125" y="-290.0365905761719"> 
    <ellipse id="MLEllipse1009" rx="496.67796407732845" ry="496.67796407732845" cx="496.67796407732845" cy="496.67796407732845" stroke="#000000" stroke-width="2"></ellipse> 
    <line id="MLLine1010" x1="496.67796407732845" y1="496.67796407732845" x2="801.6779640773284" y2="888.6779640773284" stroke="#000000" stroke-width="2"></line> 
</g> 

bboxには値を定義する方法はありますか？または、bbox（）が見ている値を設定する方法は？

Answer 1

<g>が<svg>に相対的に配置されているためです。要素の位置を変更するには、transform="translate(x, y)"を使用する必要があります。

Answer 2

getBBox（）
W3 specs on getBBox

SVGRectからすべての幾何学上の現在のユーザ空間でのタイトなバウンディングボックスが（つまり、「transform」属性の適用後に、もしあれば）、グラフィックスが含まれて返します。要素、ストローク、クリッピング、マスキング、フィルタ効果は除く）。 [...]

^重点鉱山

あなたはこの定義に見ることができるように、getBBoxによって返さSVGRectがに対して計算されるが、これは翻訳ますことを意味し、グラフィックス要素が含まれてい<g>要素に適用された要素は、このSVGRectでは考慮されません。変換は要素自体に適用され、グラフィックコンテンツには適用されないためです。

あなたはそのgetBBox()方法、

console.log(document.getElementById("wrapper").getBBox());

<svg viewBox="0 0 1500 1500" width="300" height="300"> 
 
    <g id="wrapper"> 
 
    <g id="MLG1008" stroke="#000000" stroke-width="2" fill="#000000" transform="translate(100 200)"> 
 
     <ellipse id="MLEllipse1009" rx="496.67796407732845" ry="496.67796407732845" cx="496.67796407732845" cy="496.67796407732845" stroke="#000000" stroke-width="2"></ellipse> 
 
     <line id="MLLine1010" x1="496.67796407732845" y1="496.67796407732845" x2="801.6779640773284" y2="888.6779640773284" stroke="#000000" stroke-width="2"></line> 
 
    </g> 
 
    </g> 
 
</svg>

あるいは親に呼び出すことになるから、他の<g>内側にあなたの変換<g>要素をラップすることにより、これらのxとy値を得ることができ<svg>グラフィック要素がすべてこの内部にある場合<g>：

console.log(document.querySelector("svg").getBBox());

<svg viewBox="0 0 1500 1500" width="300" height="300"> 
 
    <g id="MLG1008" stroke="#000000" stroke-width="2" fill="#000000" transform="translate(100 200)"> 
 
     <ellipse id="MLEllipse1009" rx="496.67796407732845" ry="496.67796407732845" cx="496.67796407732845" cy="496.67796407732845" stroke="#000000" stroke-width="2"></ellipse> 
 
     <line id="MLLine1010" x1="496.67796407732845" y1="496.67796407732845" x2="801.6779640773284" y2="888.6779640773284" stroke="#000000" stroke-width="2"></line> 
 
    </g> 
 
</svg>

---

また、も、あなたの問題と無関係であれば、<g>要素はwidth、height、xもy属性を持っていないことに注意してください。