javascript - 确定带有 @font-face 样式的 svg 文本宽度的可靠方法

Question

我在使用 D3 逐个定位 css 网络字体样式的 svg 文本元素时遇到问题。当我第一次将文本元素放置在加载位置时，它们会重叠。

但是，当我稍后使用延迟触发的相同功能或通过按钮定位元素时，它们不会重叠。

问题似乎出在 getBBox() 和 getBoundingClientRect() 上，它们一开始都没有返回元素的正确宽度。

关于如何首先获得正确宽度的任何想法？

JS在下面，一个例子在这里: http://bl.ocks.org/yanofsky/6618496以及这里的完整代码: https://gist.github.com/yanofsky/6618496

//helper function to grab transform coordinates 
function transformCoordOf(elem) {
    var separator = elem.attr("transform").indexOf(",") > -1 ? "," : " ";
    var trans = elem.attr("transform").split(separator);
    return { x: (trans[0] ? parseFloat(trans[0].split("(")[1]) : 0), y: (trans[1] ?         parseFloat(trans[1].split(")")[0] ): 0) };
}

//position the elements based on the one before it
function positionElements() {
    txts.filter(function(d,i){return i != 0}) //filter out the first element
        .attr("transform",function(d,i){
            var prev = d3.select(txts[0][i]), //use i b/c the list shifts on filter
            prevWidth = parseFloat(prev.node().getBoundingClientRect().width)
            prevCoords = transformCoordOf(prev);

            var cur = d3.select(this),
            curWidth = parseFloat(cur.node().getBoundingClientRect().width)
            curCoords = transformCoordOf(cur);

            var y = prevCoords.y,
                x = prevCoords.x + prevWidth + 10;

            return "translate("+x+","+y+")";
        })
}

var names = ["apples","oranges","bananas"]
var canvas = d3.select("#content")
    .append("svg")
    .attr("width","600px")
    .attr("height","100px");

var txts = canvas.selectAll("text").data(names)
    .enter()
    .append("text")
    .attr("transform","translate(10,50)")
    .text(function(d){return d});

positionElements()

d3.select("button").on("click",function(){positionElements()})

Answer 1

我还没有尝试过浏览器加载事件(我对网络字体几乎一无所知)，但是当我们遇到这个问题时(尽管是对 Chartbuilder 的黑客攻击)，我们通过使用 WebFontLoader 解决了它。等待active event .一个问题是:文本必须出现在页面上才能加载，因此您需要一个使用您的字体的隐藏跨度(或其他)。

这是我们的代码(我们从 fonts.com 加载字体:

WebFont.load({
    monotype: {
        projectId: '65980087-55e2-40ca-85ae-729fca359467',
    },
    active: function(name) {
        $(document).ready(function() {
            ChartBuilder.start();
        });
    }
});

附录:我不认为它真的有任何实际区别，但我们也改用 getComputedTextLength() 而不是测量边界框，只是因为它似乎更正确。参见 the code here .