SVG:当y属性为200时，为什么getBoundingClientRect返回190? [英] SVG: why does getBoundingClientRect return 190 when y attribute is 200?

问题描述

下面的代码将textBox1的y位置放置在200处，但是getBoundingClientRect返回的值是190.

This code below places textBox1 at a y-position of 200, but getBoundingClientRect returns a value of 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);

推荐答案

.getBoundingClientRect()是通用Element接口的一部分，并计算与屏幕视口有关的矩形. SVG提供了一些更具体的方法:

.getBoundingClientRect() is part of the generic Element interface, and computes the rectangle in relation to the screen viewport. SVG offer some more specific methods:

• SVGGraphicsElement.getBBox()在绘制元素所在的局部坐标系中计算边界框.
• SVGGraphicsElement.getCTM()计算在局部坐标系和最近 SVG视口(例如<svg>元素)之间的变换矩阵.
• SVGGraphicsElement.getScreenCTM()计算在局部坐标系和屏幕视口之间的变换矩阵.

• SVGGraphicsElement.getBBox() computes the bounding box in the local coordinate system the element is drawn in.
• SVGGraphicsElement.getCTM() computes the transformation matrix getween the local coordinate system and the nearest SVG viewport (a <svg> element, for example).
• SVGGraphicsElement.getScreenCTM() computes the transformation matrix getween the local coordinate system and the screen viewport.

此外，DOMMatrix接口具有.inverse()方法，因此您可以轻松地计算相反方向的位置. (例如，如果使用element.getScreenCTM().inverse()的结果转换鼠标事件screenx/screenY位置，则将获得相对于该元素的鼠标位置.)

In addition, the DOMMatrix interface has an .inverse() method, so you can easily compute positions in the opposite direction. (For example, if you transform a mouse event screenx/screenY position with the result of element.getScreenCTM().inverse(), you'll get the mouse position in relation to that element.)

有点尴尬的是，您必须构造一个SVGPoint对象(只有通过<svg>元素上的SVGSVGElement.createSVGPoint()方法才能实现)，才能将其应用于矩阵.

The one thing a bit awkward is that you have to construct a SVGPoint object, which can only be achieved by the SVGSVGElement.createSVGPoint() method on an <svg> element, to have something to apply your matrix to.

关于您的问题，请考虑内部<svg>中rect的三个坐标系统的不同返回值:

As for your question, consider the different return values for the three doordinate systems for the rect inside the inner <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>

这篇关于SVG:当y属性为200时，为什么getBoundingClientRect返回190?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！