Question

为什么我无法获得cx和cy的值？它打印一些数组。我只需要2个值

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="red" id="cir"/>
</svg>

<script>
        console.log(document.getElementById("cir").cx);
        console.log(document.getElementById("cir").cy);
</script>
</body>

</html>

Answer 1

cx和cy属性是SVGAnimatedLength个对象，而不是字符串或数字。

要获取cx的实际值，您需要执行以下操作：

cx.baseVal.value

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50" fill="red" id="cir"/>
</svg>

<script>
        console.log(document.getElementById("cir").cx.baseVal.value);
        console.log(document.getElementById("cir").cy.baseVal.value);
</script>
</body>

</html>

Answer 2

使用console.log()代替Console.log()

console由浏览器定义，Console不是（JS，因为大多数语言都区分大小写）

获取svg元素的位置

2 个答案: