未使用javascript绘制svg圆_Javascript_Html_Svg

未使用javascript绘制svg圆

javascript html svg

未使用javascript绘制svg圆,javascript,html,svg,Javascript,Html,Svg,我一直在尝试使用HTML中的javascript为svg操作创建一个hello world。我已经编写了下面的代码，虽然它生成了正确的html，但我在浏览器中没有看到任何输出，也没有看到任何错误 <!DOCTYPE html> <html> <head> </head> <body> <script> var svg1 = document.createElement("svg"); svg1.setAttribute("h

我一直在尝试使用HTML中的javascript为svg操作创建一个hello world。我已经编写了下面的代码，虽然它生成了正确的html，但我在浏览器中没有看到任何输出，也没有看到任何错误

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var svg1 = document.createElement("svg");
svg1.setAttribute("height",200);
svg1.setAttribute("width",500);
document.body.appendChild(svg1);
var circles = document.createElement("circle");
circles.setAttribute("cx",20);
circles.setAttribute("cy",20);
circles.setAttribute("r",20);
svg1.appendChild(circles);
</script>
</body>
</html>


var svg1=document.createElement（“svg”）；
svg1.setAttribute（“高度”，200）；
svg1.setAttribute（“宽度”，500）；
document.body.appendChild（svg1）；
var circles=document.createElement（“圆”）；
圆.setAttribute（“cx”，20）；
圆圈。setAttribute（“cy”，20）；
圆。设置属性（“r”，20）；
svg1.追加子项（圆）；

我哪里做错了？提前感谢。

SVG元素需要使用SVG XML名称空间创建。您可以使用

createElements

和

http://www.w3.org/2000/svg

名称空间：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
var svg1 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg1.setAttribute("height",200);
svg1.setAttribute("width",500);
document.body.appendChild(svg1);
var circles = document.createElementNS("http://www.w3.org/2000/svg", "circle");
circles.setAttribute("cx",20);
circles.setAttribute("cy",20);
circles.setAttribute("r",20);
svg1.appendChild(circles);
</script>
</body>
</html>


var svg1=document.createElements（“http://www.w3.org/2000/svg“，“svg”）；
svg1.setAttribute（“高度”，200）；
svg1.setAttribute（“宽度”，500）；
document.body.appendChild（svg1）；
var circles=document.createElements（“http://www.w3.org/2000/svg“，”圆圈“）；
圆.setAttribute（“cx”，20）；
圆圈。setAttribute（“cy”，20）；
圆。设置属性（“r”，20）；
svg1.追加子项（圆）；

当然可以。如果答案解决了你的问题，别忘了点击答案左边的复选标记。