HTML5 SVG:计算动态创建的SVG内容的文本大小

HTML5 SVG: Calculating text size for dynamically created SVG content

本文关键字：SVG 文本 创建 计算 动态 HTML5      更新时间：2023-09-26

我的代码目前向预先存在的SVG元素添加内容。为了计算将位于文本后面的元素的大小，需要知道下面添加的文本的大小。然而，元素的尺寸不能在添加后立即使用(见下文):

var svgNode; // supplied earlier in the code
var svgNs = "http://www.w3.org/2000/svg";
var textNode = document.createElementNS(this.svgNs,"text");
textNode.setAttributeNS(null,'x','0');
textNode.setAttributeNS(null,'y','0');  
textNode.setAttributeNS(null,'class','node-text');
svgNode.appendChild(textNode);

我希望有一个事件来代替可用的信息，比如:

textNode.addEventListener("onrender", onNodeTextEvent); // Yeah, this event does not appear to exist. Got it.

由于我认为这个问题没有以这种方式被问到，我想我将以这种方式呈现它。事实证明(至少在Firefox上)，在元素被添加到"svg"元素(它已经是文档树的一部分)之后，边界框是有效的。

svgNode.appendChild(textNode);
var bbox = textNode.getBBox();
// ... Work with bbox

答案来源:https://stackoverflow.com/a/27626991/6154987

相关文章：