Question

我正在编写一个使用D3制作一些SVG图表的应用程序。此应用程序在图表上呈现了许多注释。

注释显示为图标，因此我创建了一个外部XML文件，其中包含<defs>部分中定义的图标，并通过插入<use>元素来引用它们：

<use x="100" y="50" xlink:href="defs.xml#iconname" />

我想布置图标，使它们不重叠并相互遮挡。为了找出它们是否重叠，我试图获得它们的边界框。

我的问题是，当我尝试使用getBBox()或getBoundingClientRect()获取边界框时，返回的矩形的宽度为零，高度为零。

以下示例说明了问题：

a.html：

<?xml version="1.0" standalone="no"?>
<html>
    <head></head>
    <body>
        <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

            <use id="used_icon" x="100" y="100" xlink:href="b.xml#test_icon" />

        </svg>

        <script>

            var u = document.getElementById("used_icon");

            var rect = u.getBoundingClientRect();
            console.log("getBoundingClientRect = %d,%d - %d,%d", rect.left, rect.top, rect.right, rect.bottom);

            var box = u.getBBox();
            console.log("getBBox = x=%d,y=%d - w=%d,h=%d", box.x, box.y, box.width, box.height);


        </script>

    </body>
</html>

B.XML

<?xml version="1.0" standalone="no"?>
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <defs>
        <g id="test_icon">
            <rect width="50" height="50" />
        </g>
    </defs>

</svg>

这两个Firefox的输出是：

getBoundingClientRect = 8,8 - 8,8
getBBox = x=0,y=0 - w=0,h=0

和Chrome：

getBoundingClientRect = 107,107 - 107,107
getBBox = x=0,y=0 - w=0,h=0

如果我将<defs>内联放在同一文档中，则不会发生这种情况，并且我得到正确的宽度和高度（尽管由于this bug而导致Chrome中的x＆amp; y不正确）。但我宁愿不将它们放在同一个文档中，这样我就可以集中所有图标的定义。

我认为其原因是引用外部定义的异步性 - 浏览器可能必须获取它们。请注意，页面是动态构造的，因此不仅仅是等待发出onLoad或类似事件的情况。

在加载外部引用时，有什么办法可以获得回调吗？

使用外部引用获取<use>的边界框

0 个答案: