Точка DOM интерпретируется как объект в chrome

Question

Следующий, довольно глупый, код отлично работает в Firefox, но в chrome происходит то, что указано в комментариях. Хотел проверить функциональность SVG, поэтому я проверяю, является ли центр эллипса точкой заполнения этого эллипса, что, очевидно, верно. Загадочным фактом являются первые два журнала консоли. Вывод точки Dom как "Dom point", а затем ее typeof as 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 раньше был SVGPoint, он был изменен на DOMPointInit .

Преимущество DOMPointInit состоит в том, что вы можете передать либо DOMPoint, либо SVGPoint в API и он по-прежнему будет работать, как и любой объект, имеющий свойства x и y.

Firefox реализовал новый API, Chrome еще не реализовал.

Если вы передадите SVGPoint который вы можете получить через SVGSVGElement .createSVGPoint (), ваш код будет работать как в Chrome, так и в Firefox.

Answer 2

Спасибо вам обоим. Получил, что мой код работает как в chrome, так и в firefo, спасибо за вашу помощь :) последний 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>