测量尚未在javascript中创建SVG文本

2023年3月7日 152次阅读

我正在尝试创建一个函数来测量文本元素在SVG元素中的大小.我在Stack Overflow上找到的代码示例不起作用,宽度为零.如果我延迟测量,我可以得到文本,但不是马上.这是怎么解决的？

var messureSVGtext = function(text, svg, options){
   var text = document.createElementNS(svgns, 'text');
   text.style.fontFamily = options.font;

   text.setAttribute("style",
        "font-family:" + options.font + ";" +
        "font-size:" + options.fontSize + "px;"
   );

   var textNode = document.createTextNode(text);

   text.appendChild(textNode);

   svg.appendChild(text);

   // This does not work
   console.log(text.clientWidth);
      
   //This does
   setTimeout(function(){
      console.log(text.clientWidth);
   }, 100);
}

最佳答案 您可以获取元素的“计算样式”,然后检查宽度和宽度.高度.

给元素一个id属性,在将它附加到DOM之后,试试这个：

var elem1 = document.getElementById("text_elem");
var style = window.getComputedStyle(elem1, null);

console.log(style.width, style.height);

工作实例

SVG

<svg
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    width="640"
    height="480"
    viewBox="0 0 640 480"
    style="display:block">

    <text id="svg_text" x="20" y="50" style="font-family:Arial; font-size:36px; fill:#BADA55">Hello World!</text>

</svg>

JavaScript的

function getCompStyle(oid, cbf)
{
    var obj, stl, itv;

    obj = document.getElementById(oid);
    itv = setInterval(function()
    {
        stl = window.getComputedStyle(obj, null);

        if (stl && (stl.width.indexOf('0') != 0))
        {
            clearInterval(itv);
            cbf(stl);
        }
    },0);

}

getCompStyle('svg_text', function(style)
{
    console.log(style.width);
});

要使用该示例,请将SVG放在HTML< body>中.以及< script>中的JavaScript SVG下面的标记 – 也在< body>中.

点赞