SVG: почему getBoundingClientRect возвращает 190, когда атрибут y равен 200?

Question

Этот код ниже помещает textBox1 в y-позицию 200, но getBoundingClientRect возвращает значение 190.

Почему?

https://codepen.io/anon/pen/REKayR?editors=1011

<svg id="rootBox" width="500" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="0%" y="0%" width="100%" height="100%" fill="beige" />

    <svg id="textBox1" x="0%" y="200" width="100%" height="25%">
      <rect class="background" x="0%" y="0%" width="100%" height="100%" fill="gray" fill-opacity="0.5" />
      <text class="textGroup" x="0" y="0"><tspan x="50%" dy="-0.25em" text-anchor="middle">tspan line 0</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 1</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 2</tspan></text>
    </svg>

</svg>


var textBox = $("#textBox1");
var textBBox = textBox[0].getBoundingClientRect();
console.log("The y-pos is: " + textBBox.y);

Answer 1

.getBoundingClientRect() является частью общего интерфейса Element и вычисляет прямоугольник относительно окна просмотра экрана.SVG предлагает некоторые более конкретные методы :

• SVGGraphicsElement.getBBox() вычисляет ограничивающую рамку в локальной системе координат, в которой нарисован элемент.
• SVGGraphicsElement.getCTM() вычисляетматрица преобразования находится между локальной системой координат и ближайшим областью просмотра SVG (например, элементом <svg>).
• SVGGraphicsElement.getScreenCTM() вычисляет матрицу преобразования между локальной системой координат иЭкран области просмотра.

Кроме того, интерфейс DOMMatrix имеет метод .inverse(), так что вы можете легко вычислять позиции в противоположном направлении.(Например, если вы преобразуете положение мыши в screenx / screenY с результатом element.getScreenCTM().inverse(), вы получите положение мыши относительно этого элемента.)

Единственное, что немного неловко, так этовам нужно создать объект SVGPoint, который может быть достигнут только методом SVGSVGElement.createSVGPoint() на элементе <svg>, чтобы иметь к чему применить вашу матрицу.

Что касается вашего вопроса, рассмотримразличные возвращаемые значения для трех систем координат для прямоугольника внутри внутреннего <svg>:

var textBox = document.querySelector('#textBox1 rect');
var svg = document.querySelector('#rootBox');
var point = svg.createSVGPoint();

var local = textBox.getBBox();
point.x = local.x, point.y = local.y;
console.log("local: ", local.x, local.y);

var nearest = textBox.getCTM();
var point2 = point.matrixTransform(nearest);
console.log("nearest viewport: ", point2.x, point2.y);

var screen = textBox.getScreenCTM();
var point3 = point.matrixTransform(screen);
console.log("screen viewport: ", point3.x, point3.y);

<svg id="rootBox" width="500" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="0%" y="0%" width="100%" height="100%" fill="beige" />

    <svg id="textBox1" x="0%" y="200" width="100%" height="25%">
      <rect class="background" x="0%" y="0%" width="100%" height="100%" fill="gray" fill-opacity="0.5" />
      <text class="textGroup" x="0" y="0"><tspan x="50%" dy="-0.25em" text-anchor="middle">tspan line 0</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 1</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 2</tspan></text>
    </svg>
</svg>

Answer 2

getBoundingClientRect принимает во внимание такие вещи, как положение прокрутки.Любые поля или отступы в теле HTML также будут учитываться, но вы добавите к результату, а не вычтете.

Если вы убедитесь, что не прокручиваетесь вниз, а поля не учитываются, вы получите200:

function log() {
  var textBox = $("#textBox1");
  var textBBox = textBox[0].getBoundingClientRect();
  console.log("The y-pos is: " + textBBox.y);
}
log();
setInterval(log, 1000);

html,
body {
  margin: 0;
  padding: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<svg id="rootBox" width="500" height="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

    <rect x="0%" y="0%" width="100%" height="100%" fill="beige" />

    <svg id="textBox1" x="0%" y="200" width="100%" height="25%">
      <rect class="background" x="0%" y="0%" width="100%" height="100%" fill="gray" fill-opacity="0.5" />
      <text class="textGroup" x="0" y="0"><tspan x="50%" dy="-0.25em" text-anchor="middle">tspan line 0</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 1</tspan><tspan x="50%" dy="1.5em" text-anchor="middle">tspan line 2</tspan></text>
    </svg>

</svg>