Question

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

＆＃13;

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);
}

＆＃13;

Answer 1

您可以获取元素的“计算样式”，然后检查宽度和宽度。高度。

为元素赋予var elem1 = document.getElementById("text_elem"); var style = window.getComputedStyle(elem1, null); console.log(style.width, style.height);属性，并在将其附加到DOM后，尝试：

<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>

工作示例

SVG

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);
});

的JavaScript

<body>

要使用该示例，请将SVG放入您的HTML <script>中，将JavaScript放在SVG下方的<body>标记中 - 也放在{{1}}中。

在javascript

1 个答案:

工作示例