DOM点被解释为Chrome中的对象

Question

以下相当愚蠢的代码在Firefox中可以正常工作，但在chrome中，注释中所指示的会发生。想检查SVG功能，所以我要检查椭圆的中心是否在该椭圆的填充点上，这显然是正确的。令人困惑的事实是前两个控制台日志。 Dom点输出为“ Dom点”，然后将其typeof作为对象，这自然会破坏接下来的两个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的接口以前是SVGPoint，它是changed to DOMPointInit。

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

Firefox已实现新API，Chrome尚未实现。

[如果传递了可以通过SVGSVGElement.createSVGPoint（）获得的SVGPoint，则您的代码将在Chrome和Firefox中都可以使用。

Answer 2

感谢你们俩。感谢您的帮助，我的代码得以运行:)最后一个console.log在我检查椭圆的中心是否位于路径上时返回true。

<svg id="mySVG" width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

<ellipse id="myEllipse" cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
<path id="myPath" d="M20,230 L75,75 l90,90" fill="none" stroke="blue" stroke-width="5"/>

</svg>

<script>

//

  	let myPath = document.getElementById("myPath");
    let myEllipse = document.getElementById("myEllipse");
    let mySVGPoint = document.getElementById("mySVG").createSVGPoint();
    mySVGPoint.y = myEllipse.cx.animVal.value;
    mySVGPoint.x = myEllipse.cy.animVal.value;

    console.log(`Point at ${mySVGPoint.x}, ${mySVGPoint.y}:`, myPath.isPointInStroke(mySVGPoint));





</script>