Question

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

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;

已更新 不幸的是，添加后更改大小不是很方便，因为您必须找到所有元素并按比例更改位置。（我最初设置了模板引擎（handlebars.js），在其中传递了必要的参数，它会自动构建具有尺寸的元素（问题仅在于获取长度文本）。

Answer 1

OP正在评论：

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

正如我所评论的：在这种情况下，您可以从svg所需的任何大小开始，附加文本，获取文本的大小，例如使用textLength属性，然后更改svg元素的大小

let tagText = document.createElementNS("http://www.w3.org/2000/svg", "text");
    tagText.setAttributeNS(null, "y", 20);
    tagText.textContent = 'Some text ...';
svg.appendChild(tagText) 

let widthTitle = tagText.textLength.baseVal.value;

svg.setAttributeNS(null,"viewBox",`0 0 ${widthTitle} 25`)

text{font-size:18px;
  font-weight:400;
  font-family:Roboto
}
svg{border:1px solid; width:200px;}

<svg id="svg"></svg>

Answer 2

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

getComputedStyle(tagText).width

但是，如果您自己没有指定该宽度（例如，使用CSS），则默认值为auto。

在这种情况下，您可以尝试查看元素父级的宽度，例如：

tagText.parentElement.offsetWidth

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

2 个答案: