DOM 点被解释为 chrome 中的对象答案

【问题标题】：DOM point interpreted as object in chromeDOM 点被解释为 chrome 中的对象
【发布时间】：2020-09-12 00:10:31
【问题描述】：

以下相当愚蠢的代码在 Firefox 中运行良好，但在 chrome 中会发生 cmets 中指示的情况。想要检查 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'.

【问题讨论】：

DOMPoint != SVGPoint
我理解你的意思，但我明确地创建了一个 DOM 点，为其提供从 SVG 检索的值，第一个 console.log 确认这是一个 DOM 点：s
我不认为你明白我的意思。您正在创建一个 DOMPoint 对象。然后你将它传递给一个只接受SVGPoint 对象的方法，并通过非常清晰的错误消息Uncaught TypeError: Failed to execute 'isPointInFill' on 'SVGGeometryElement' parameter 1 is not of type 'SVGPoint'. 告诉你这一点。 x 和 y 的来源没有任何区别。这是您传递给它的对象类型错误。 Firefox 不在乎这很好，但 Chrome 显然在乎，并且正在告诉你究竟出了什么问题。改为创建SVGPoint。
对不起。读得太快了。现在尝试：让 mySVGPoint = ellipseFirstStop.createSVGPoint();给我 createSVGPoint() 不是一个函数 :'(
你需要一个

标签： javascript svg dom

【解决方案1】：

isPointInFill 的接口曾经是一个 SVGPoint，它是changed to DOMPointInit。

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

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

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

【讨论】：

当我读到：document.getElementById("SVG-ElementID").createSVGPoint();我假设一个 SVG 元素可以说是“任何”svg 元素或“子元素”。当我检查developer.mozilla.org/en-US/docs/Web/API/SVGElement 时，没有提到“createSVGPoint 作为它的方法之一。这一切是不是有点晦涩难懂，或者我只是没有遵循足够系统的学习曲线？如果是这样，你会推荐什么资源来让我学习更多系统的？
SVGElement 接口是所有 SVG 元素的通用基类。您需要 SVGSVGElement 接口，它是专门用于
好的。再次感谢，我的阅读理解不好，对不起。现在我看到 SVGSVGElement != SVGElement。我会尽我所能把更多的注意力放在我的阅读上。

【解决方案2】：

感谢你们俩。感谢您的帮助，让我的代码在 chrome 和 firefox 中都能正常工作：) 当我检查椭圆的中心是否位于路径上时，最后一个 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>

【讨论】：