<text>要素をjavascriptで作成した後、なぜgetBBoxを使用できないのですか？

Question

<text>要素をマークアップに追加するスクリプトがあります（既存の<svg>の中にあります）。その新しい要素にgetBBox()を実行するとエラーが表示されます。私が<text>をマークアップに含めて同等のスクリプトを実行すると、getBBoxは問題なく実行されます。 DOMは完全に私のjs-builtをテキスト要素として扱っていないのですか？「<テキストで書かれたものは、実際には<text>」のステップです。

function works() { 
 
    console.log('start "works"') 
 
    var svgElem = document.querySelector('.works'); 
 
    var textElem = svgElem.querySelector('text'); 
 
    var textBBox = textElem.getBBox(); 
 
    console.log(textBBox); 
 
    console.log('end "works"') 
 
} 
 
works(); 
 

 
function doesntwork() { 
 
    console.log('start "doesntwork"') 
 
    var svgElem = document.querySelector('.doesntwork'); 
 
    var textElem = document.createElement("text"); 
 
    textElem.appendChild(svgElem.firstChild); 
 
    svgElem.appendChild(textElem); 
 
    console.log('"doesntwork" breaks after this'); 
 
    var textBBox = textElem.getBBox(); // breaks the script 
 
    console.log(textBBox); 
 
    console.log('end "doesntwork"') 
 
} 
 
doesntwork();

<svg class="doesntwork"> 
 
    not working 
 
</svg> 
 

 
<svg class="works"> 
 
    <text> 
 
    working 
 
    </text> 
 
</svg>

---

少ない一般的な第二部：私の完全なプロジェクトで

、私は実際に

0に

<div class="target">content</div> 

を回しています

<div class="target"><svg><text>content</text></svg></div> 

<text>と<svg>を作成するにはjsを使用します。アイデアは、基本的に

var targetElems = document.querySelectorAll('.target'); 
for (var i = 0; i < targetElems.length; ++i) { // for each target 
    var targetElem = targetElems[i]; 
    var textElem = document.createElement("text"); // build a <text> 
    while (targetElem.firstChild) // put the target's content (which could include child elements) in the <text> 
     textElem.appendChild(targetElem.firstChild); 
    var svgElem = document.createElement("svg"); // build an <svg> 
    svgElem.appendChild(textElem); // put the <text> in the <svg> 
    targetElem.appendChild(svgElem); // put the <svg> in the target 
    var textBBox = textElem.getBBox(); // want to be able to get the <text>'s BBox (this currently has a breaking error) 
    console.log(textBBox); 
} 

私はで各ステップ信号を追加する必要がありますされて - 「これは<text>あり、これは<svg>ですか」？

また、私は全体が間違っていると思いますか？.target > [content]を.target > svg > text > [content]にするよりスマートな方法がありますか？

Answer 1

あなたはcreateElementNSを使用できるはずです。

document.createElementNS(String namespaceURI, String qualifiedName)。

ここで、このような

namespaceURI = "http://www.w3.org/2000/svg" 
name = "text" 

何か：

：

function worksnow() { 
 
    console.log('start "worksnow"') 
 
    var svgElem = document.querySelector('.worksnow'); 
 
    var textElem = document.createElementNS("http://www.w3.org/2000/svg", "text"); // CHANGED THIS 
 
    textElem.appendChild(svgElem.firstChild); 
 
    svgElem.appendChild(textElem); 
 
    var textBBox = textElem.getBBox(); // no longer breaks the script! 
 
    console.info(textBBox); // Gets SVGRect data. 
 
    console.log('end "worksnow"') 
 
} 
 
worksnow();

<svg class="worksnow"> 
 
    works now! 
 
</svg>

ので、コンソールでは、あなたはこれを取得します