我试图通过使用 getBBox() 方法获取边界框来根据文本的宽度和高度放置 SVG 文本元素。
如果文本使用网络安全字体，则在不同浏览器中效果相当好，但如果使用 @font-face 和自定义网络字体设置文本样式，则在 Firefox (Mac) 和 Safari 中返回的文本宽度不正确（ iOS）。
它在 Safari (Mac) 和 Chrome (Mac) 中都能完美运行。
如果灰色框与文本宽度相同，则它可以在该浏览器中运行。
有人知道如何在所有浏览器中获得文本边框的正确宽度吗？
浏览器在完成加载/应用之前正在计算边界框@font-face，假设你不需要IE，你可以将你的BBox计算函数包装在一个document.fonts.ready承诺...
document.fonts.ready.then(() => const bbox = textEl.getBBox());
这是一个展示问题和解决方法的工作示例：
const xmlns = "http://www.w3.org/2000/svg";
const correct = document.getElementById("correct");
const incorrect = document.getElementById("incorrect");
visualizeBBox(incorrect);
document.fonts.ready.then(()=> visualizeBBox(correct));
function visualizeBBox(el){
const bbox = el.getBBox();
const rect = document.createElementNS(xmlns, "rect");
for (prop in bbox) rect.setAttribute(prop, bbox[prop]);
document.querySelector("svg").appendChild(rect);
}
svg text {
font-family: 'Diplomata SC', serif;
}
svg rect {
stroke: red;
fill: none;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Diplomata+SC&display=swap" rel="stylesheet">
<svg xmlns="https://www.w3.org/2000/svg" width="600" height="400">
<text x="0" y="40" font-size="24" id="correct">Correct dimensions</text>
<text y="100" font-size="24" id="incorrect">Incorrect dimensions</text>
<svg>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
