I'm trying to create a simple library to draw with SVG on HTML. While the code generates valid HTML that does draw what I want, when I do this programatically, nothing is drawn in the screen. Here's the code that I'm using:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body>
<div id="diagram"></div>
<script type="text/javascript">
function Diagram(div) {
div = document.getElementById(div);
svg = document.createElement("svg");
svg.setAttribute("width", "600");
svg.setAttribute("height", "400");
div.appendChild(svg);
this.diagram = svg;
this.rectangle = function (x, y, width, height) {
rect = document.createElement("rect");
rect.setAttribute("x", x);
rect.setAttribute("y", y);
rect.setAttribute("width", width);
rect.setAttribute("height", height);
this.diagram.appendChild(rect);
}
}
var diagram = new Diagram("diagram");
diagram.rectangle(100, 100, 100, 100);
</script>
</body>
</html>
Needless to say, I'm not experienced with JS and I'm using this as an exercise in both learning JS and SVG, but I was unable to understand why my example is not working :-(
Aucun commentaire:
Enregistrer un commentaire