我写了一个小example page,看起来像这样:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>IGO – IRC Go</title>
<link rel="stylesheet" type="text/css" href="igo.css" />
<script type="text/javascript" src="igo.js"></script>
</head>
<body>
<h1 onclick="makeCircle()">IGO – IRC Go</h1>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="board"
width="4" height="4" viewBox="0 0 4 4">
<!-- content will be generated by script -->
</svg>
<div id="foo"></div>
</body>
</html>
igo.js
看起来像这样:
function makeCircle() {
var circle = document.createElement("circle");
var board = document.getElementById("board");
circle.cx = 4;
circle.cy = 4;
circle.r = 4;
circle.fill = "lime";
board.appendChild(circle);
}
问题是:它不起作用;圆圈不显示。你能救我吗?
答案 0 :(得分:4)
请查看以下网址: http://blog.blazingcloud.net/2010/09/17/svg-scripting-with-javascript-part-1-simple-circle/
您应该使用以下代码:
var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c2.setAttribute("cx", "250");
c2.setAttribute("cy", "100");
c2.setAttribute("r", "60");
c2.setAttribute("fill", "#996699");
c2.setAttribute("stroke", "#AA99FF");
c2.setAttribute("stroke-width", "7");
mySvg.appendChild(c2);
您当前正在编辑DOM对象而不是浏览器使用的属性。