我试图显示圆的属性值，但不起作用

Question

我正在尝试显示圆形的属性值，但它不起作用。

我的脚本

var x = document.getElementById("circle").getAttribute("cx");
document.write(x);

我的HTML

<svg width="1000" height="500">
    <circle id="circle" cx="50" cy="50" r="50">
</svg>

Answer 1

circle元素应该是自闭合的。

var x = document.getElementById("circle").getAttribute("cx");
document.write(x);

<svg width="1000" height="500">
  <circle id="circle" cx="50" cy="50" r="50" />
</svg>

由于您的SVG宽度和高度，您需要在上方的代码段窗口中向下滚动。

Answer 2

您的代码按我的代码片段预期的方式工作。其他原因导致您的问题。

请注意，值50远远低于下方的圆圈，因此您必须滚动一点。

可能是您的JavaScript在dom完全加载之前运行。将代码添加到body onload事件处理程序中。

var x = document.getElementById("circle").getAttribute("cx");
document.write(x);

<svg width="1000" height="500">
    <circle id="circle" cx="50" cy="50" r="50">
</svg>

Answer 3

如果我正确理解了您的问题，则尝试从html Javascript访问svg元素。如果您的问题是这个，请参见以下答案：

How to access SVG elements with Javascript