😰
JSのgetBBox()がconstructorで読み取れないだと！？
結論
-
getBBox()はconstructorでは動作してくれない
- 原因は不明。chatgptに聞いたり調べみたりしてみたがわからない
- 知っている方、教えて下さい🙏
- 多分、レンダリング？とかが全部終わってないのかもしれない
- 原因は不明。chatgptに聞いたり調べみたりしてみたがわからない
-
DOMContentLoadedを使うことで対処した
-
chatgptやネットで調べても情報が全然なかった
- 余裕で体感2~3時間ぐらい溶かしてしまった😭
JSでtext要素のwidthをgetしようとした
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svgs</title>
</head>
<body>
<svg width="900" height="600">
<svg id="rect" x="0" y="0" width="200">
<text id="dummy" x="20" y="35" font-size="15">ダミーテキスト</text>
</svg>
</svg>
<script src="./index.js"></script>
</body>
こんな感じのhtmlを用意して、DOMが生成されてからjsが読み込まれるように、body終了タグ寸前でscriptでjsを読み込み。
class Block{
constructor(){
let element=document.getElementById("dummy")
console.log(element)
}
}
※だいぶ省略してます
<text id="dummy" x="20" y="35" font-size="15">
ダミーテキスト
</text>
こんな感じで取得できてた。ので、getBBox()を実行してみると。。
class Block{
constructor(){
let element=document.getElementById("dummy")
console.log(element.getBBox())
}
}
SVGRect {x: 0, y: 0, width: 0, height: 0}
height: 0
width: 0
x: 0
y: 0
[[Prototype]]: SVGRect
！？！？なぜ？！
要素自体は取得できるのになぜかgetBBoxはうまく動かない。
原因はわからないが、割り切ってDOMContentLoadedを使う
class Block{
constructor(){
let element=document.getElementById("dummy")
document.addEventListener("DOMContentLoaded",function() {
console.log("dom読みこみ後", self.text.getBBox())
})
}
}
SVGRect {x: 20, y: 21.860000610351562, width: 104.109375, height: 15.139999389648438}
height: 15.139999389648438
width: 104.109375
x: 20
y: 21.860000610351562
[[Prototype]]: SVGRect
これで以上のようにちゃんとgetBBoxの値が取得できました。
関連ページ
Discussion