DOM point interpreted as object in chrome

user_10189274 0
Viewed 634

The following, rather silly, code works fine in Firefox, but in chrome what is indicated in the comments happens. Wanted to check the SVG functionality, so I'm checking if the center of an ellipse is point in fill of that ellipse, which is obviously true. The puzzling fact are the first two console logs. The Dom point output as "Dom point", and then its typeof as object, which naturally breaks the next two console.log statements.

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'.
svg dom javascript
2 Answers

The interface for isPointInFill used to be an SVGPoint, it was changed to DOMPointInit.

The advantage of DOMPointInit is that you can pass either a DOMPoint or an SVGPoint to the API and it will still work, as will basically any object that has x and y properties.

Firefox has implemented the new API, Chrome has not yet.

If you pass an SVGPoint that you can get via SVGSVGElement.createSVGPoint() your code will work in both Chrome and Firefox.

user_10380150

Thanks to both of you. Got my code working in both chrome and firefoxthanks to your help :) the last console.log returns true when I check if the centre of the ellipse lays on the path.

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

user_101892740
Related