小编gee*_*eeb的帖子

以下相当愚蠢的代码在 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 …

我尝试了一个简单的测试来理解 svg + JS 的行为，因为我需要检查某个 SVG 对象是否在 svg 路径上并采取相应的操作。当尝试显式访问 SVG 元素（在本例中为椭圆）的 .cx 或 .cy 属性时，我得到的是 SVGAnimatedLength 对象，而不是获取坐标。

<svg
   id="contenedorCirculo"
   width="200mm"
   height="200mm"
   viewBox="0 0 200 200"
   version="1.1"
>
<g
   inkscape:groupmode="layer"
   id="layer3"
   inkscape:label="points">
<ellipse
 style="fill:#ff00e5;fill-opacity:1;stroke:#fbde00;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 id="circulo"
 cx="50"
 cy="50"
 rx="5"
 ry="5" />

</g>
</svg>

<script>
//this returns SVGAnimatedLength { baseVal: SVGLength, animVal: SVGLength }
console.log(document.getElementById("circulo").cx);

</script>