Javascript 获取宽度元素<；text/>；（SVG）在添加到SVG之前使用js

好时光论坛用户。请告诉我如何在考虑字体参数（大小、类型、样式）的情况下获得元素的大小

已更新 不幸的是，添加后更改大小不是很方便，因为必须找到所有元素并按比例更改位置。（我最初设置了模板引擎（handlebar.js），在这里我传递了必要的参数，它会自动构建一个带有维度的元素（问题只在于get-length文本）

---

假设元素已插入到网页中，您可以使用以下内容：

getComputedStyle（tagText）.width

但是，如果您自己没有指定宽度（例如使用CSS），那么在您的情况下，默认值将是

auto

如果是这种情况，您可以尝试查看元素父元素的宽度，执行如下操作：

tagText.parentElement.offsetWidth

OP正在评论：

我根据接收到的数据生成一个svg对象。生成的文本可以有不同的长度，我需要计算它的大小以正确生成宽度的对象

正如我所评论的：在这种情况下，您可以从svg的任何大小开始，添加文本，获取文本的大小，例如使用

textLength

属性，然后更改svg元素的大小

let tagText=document.createElements（“http://www.w3.org/2000/svg“，”文本“）；
tagText.setAttributeNS（空，“y”，20）；
tagText.textContent='Some text…'；
svg.appendChild（tagText）
让widthTitle=tagText.textLength.baseVal.value；
setAttributeNS（null，“viewBox”`0${widthTitle}25`）

text{字体大小：18px；
字体大小：400；
字体系列：Roboto
}
svg{边框：1px实心；宽度：200px；}

---

为什么在添加到SVG之前需要获取此值？可能是@enxaneta的重复，我会根据接收到的数据生成一个SVG对象。生成的文本可以有不同的长度，我需要计算它的大小以正确生成宽度的对象。其思想是创建一个虚拟文本，获取其宽度和im中间删除它。可以使用纯JS。我已经看到了您的更新。在这种情况下，您可以创建一个隐藏的SVG，将文本附加到隐藏的SVG元素，获取大小并在主SVG元素中使用它假设元素已插入网页->哦，不，OP要求在添加之前获取元素的宽度d到SVG@NinoFiliu可以将元素附加到其前面的页面（元素）用新信息更新。这就是我对问题的解释。但也许你所说的是OP的意思，在这种情况下，我同意你的看法。@NinoFiliu鉴于这是不可能的，那么一个获得相同结果的答案不是更可取吗？原则上，我同意你的看法，并且可以作为一个好的解决方案。我只是简单介绍一下吃一个临时svg，从原始svg复制“viewPort”属性，测量长度并将其删除。（我已经更新了（更正了问题）），感谢您的帮助）

let tagText = document.createElementNS("http://www.w3.org/2000/svg", "text");
    tagText.setAttributeNS(null, "font-size", 18);
    tagText.setAttributeNS(null, "font-weight", 400);
    tagText.setAttributeNS(null, "font-family", "Roboto");
    tagText.innerHTML = 'Some text ...';
    // where ViewPort ??    

let widthTitle = tagText.getBBox().width;
console.log('width title: ', widthTitle); // return 0;