什么是获取包含svg

时间:2018-01-25 13:19:39

标签: javascript html firefox svg

如果内部有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元素就在外面。 下图显示了这个:

Image showing the problem

看起来svg的偏移量被应用了两次。

getBoundingClientRect是否正确获取元素的位置和大小(例如带有类节点的g元素)? HTML或svg元素有问题或者我遇到了Firefox错误吗?

我使用的是当前版本的Firefox(58.0 64位)。

1 个答案:

答案 0 :(得分:1)

您遇到的问题是嵌套在svg标记(g)内的.nodeicon标记正在启动新的视口上下文。严格来说,它不应该嵌套在g标签内,但无论如何,它并不是真的有必要,因为你将它作为一种方法将它们内部的两个元素分组 - 这就是g标记的用途。

尝试删除嵌套在svg内的.nodeicon标记,并将svg&lt; xy属性中的坐标移动到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>