用JavaScript创建<text>元素后，我为什么不能getBBox？

我有一个剧本，增加了一个<text>元素我的标记，现有<svg>内。在新元素上运行getBBox()会给我一个错误。如果我包括<text>的标记来开始和运行等效脚本，getBBox运行没有任何问题。是DOM没有完全治疗我的JS-建<text>作为文本元素......我失去了一些“写的东西‘<文本>’，其实是一个<text>”一步？用JavaScript创建<text>元素后，我为什么不能getBBox？

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>

减通用第二部分：

在我的整个项目，我其实转向

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

到

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

使用js创建一个<text>和一个<svg>。这个想法基本上是

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]？

来源

2016-09-12 henry

您应该可以使用：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>

所以，在控制台，你会得到这样的：

来源

2016-09-12 20:32:22

太棒了，这正是我需要的。谢谢！ Fwiw，万一任何未来的人都想知道，当我为''和' henry

使用'createElementNS'时，我的完整示例是可用的。欢迎您。是的，如果您需要创建任何**'svg'标签，请始终使用：'createElementNS'。感谢编辑。 –

用JavaScript创建<text>元素后，我为什么不能getBBox？

回答

相关问题