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屋!