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

时间:2018-07-10 08:11:16

标签: javascript html

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

我的脚本

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>

3 个答案:

答案 0 :(得分: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宽度和高度,您需要在上方的代码段窗口中向下滚动。

答案 1 :(得分:0)

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

请注意,值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>

答案 2 :(得分:0)

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

How to access SVG elements with Javascript