Question

如果内部有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位）。

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

什么是获取包含svg

1 个答案: