javascript - DOM 点被解释为 chrome 中的对象

Question

以下相当愚蠢的代码在 Firefox 中运行良好，但在 chrome 中会发生注释中指示的情况。想要检查 SVG 功能，所以我正在检查椭圆的中心是否是椭圆的填充点，这显然是正确的。令人费解的事实是前两个控制台日志。 Dom 点输出为“Dom 点”，然后其 typeof 为 object，这自然会破坏接下来的两个 console.log 语句。

let ellipseFirstStop = document.getElementById("Sation_1_circle"); //Sation_1_circle is an SVG ellipse.
let centroFirstStop = new DOMPoint(+ellipseFirstStop.cx.animVal.value, +ellipseFirstStop.cy.animVal.value);

console.log(centroFirstStop);
//outputs DOMPoint {x: 268.2749938964844, y: 183.63299560546875, z: 0, w: 1}, all fine.

console.log(typeof centroFirstStop);
//outputs "object", what?

console.log("is point in fill test: "+ellipseFirstStop.isPointInFill(centroFirstStop));
//causes: Uncaught TypeError: Failed to execute 'isPointInFill' on 'SVGGeometryElement' parameter 1 is not of type 'SVGPoint'.

console.log("is point in fill test: "+ellipseFirstStop.isPointInFill(new DOMPoint(+ellipseFirstStop.cx.animVal.value, +ellipseFirstStop.cy.animVal.value)));
//causes: Uncaught TypeError: Failed to execute 'isPointInFill' on 'SVGGeometryElement': parameter 1 is not of type 'SVGPoint'.

Answer 1

isPointInFill 的接口(interface)曾经是一个 SVGPoint，它是 changed to DOMPointInit .

DOMPointInit 的优点是您可以将 DOMPoint 或 SVGPoint 传递给 API，它仍然可以工作，基本上任何具有 x 和 y 属性的对象都可以。

Firefox 已经实现了新的 API，Chrome 还没有。

如果您传递一个 SVGPoint，您可以通过 SVGSVGElement .createSVGPoint() 你的代码可以在 Chrome 和 Firefox 中运行。