如果内部有svg元素,我有以下html并使用getBoundingClientRect获得奇怪的结果:
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<svg>
<g transform="translate(10,10) scale(1)">
<g class="nodes">
<g style="inline" transform="translate(20,20)">
<rect style="stroke: rgb(170, 170, 170); stroke-width: 1; fill: rgb(248, 248, 248);" width="100" height="90"></rect>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(182, 204, 216); stroke-width: 0;" x="0" y="0" height="20" width="100"></rect>
<text class="nodetext" x="3" y="15">Text 1</text>
</g>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(221, 185, 172); stroke-width: 0;" x="0" y="22" height="20" width="100"></rect>
<text class="nodetext" x="3" y="37">Test 2</text>
</g>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(221, 185, 180); stroke-width: 0;" x="0" y="44" height="20" width="100"></rect>
<text class="nodetext" x="3" y="59">Test 3</text>
</g>
<g class="nodebox">
<rect class="noderect" style="fill: rgb(236, 163, 154); stroke: rgb(212, 139, 130); stroke-width: 2;" x="0" y="66" height="20" width="100"></rect>
<text class="nodetext" x="3" y="81">Test 4</text>
<g class="nodeicon">
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" x="80" y="68">
<rect height="14" width="14" y="1" x="1" stroke="#888888" stroke-width="1" fill="#ffffff" fill-opacity="0.5"></rect>
<line x1="4" y1="8" x2="12" y2="8" stroke="#888888" stroke-width="2"></line>
</svg>
</g>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
我获得了比我在Firefox中预期更大的矩形。 当我检查对象时,内部svg元素的显示边界框很好,但是周围的g元素(类nodeicon)在外面。 如果我删除这个g元素,下一个周围的g元素就在外面。 下图显示了这个:
看起来svg的偏移量被应用了两次。
getBoundingClientRect是否正确获取元素的位置和大小(例如带有类节点的g元素)? HTML或svg元素有问题或者我遇到了Firefox错误吗?
我使用的是当前版本的Firefox(58.0 64位)。
答案 0 :(得分:1)
您遇到的问题是嵌套在svg
标记(g
)内的.nodeicon
标记正在启动新的视口上下文。严格来说,它不应该嵌套在g
标签内,但无论如何,它并不是真的有必要,因为你将它作为一种方法将它们内部的两个元素分组 - 这就是g
标记的用途。
尝试删除嵌套在svg
内的.nodeicon
标记,并将svg
&lt; x
和y
属性中的坐标移动到transform
标记上的g
属性。
即:
<g class="nodeicon" transform="translate(80, 68)">
<rect height="14" width="14" y="1" x="1" stroke="#888888" stroke-width="1" fill="#ffffff" fill-opacity="0.5"></rect>
<line x1="4" y1="8" x2="12" y2="8" stroke="#888888" stroke-width="2"></line>
</g>