try something about svg.
I think the key is the document.createElementNS(). it is useful to create svg object in a quirk mode web page.
e.g.
<html>
<head>
<script language=javascript>
var cx = 40, cy = 40;
function doit() {
cx += 20;
cy += 20;
cir.setAttribute("cx", cx);
cir.setAttribute("cy", cy);
}
var svgns = "http://www.w3.org/2000/svg";
var svg = document.createElementNS(svgns, "svg");
var node = document.createElementNS(svgns, "defs");
svg.setAttribute("width", 500);
svg.setAttribute("height", 500);
svg.appendChild(node);
var cir = document.createElementNS(svgns, "circle");
cir.setAttribute("cx", cx);
cir.setAttribute("cy", cy);
cir.setAttribute("r", 40);
cir.setAttribute("fill", "rgb(9,169,176)");
cir.setAttribute("fill-opacity", 0.49);
cir.setAttribute("stroke", "rgb(93,10,42)");
cir.setAttribute("stroke-opacity", 0.5);
cir.setAttribute("stroke-width", 2);
svg.appendChild(cir);
var g1 = document.createElementNS(svgns, "g");
var rect1 = document.createElementNS(svgns, "rect");
rect1.setAttribute("x", 80);
rect1.setAttribute("y", 60);
rect1.setAttribute("width", 250);
rect1.setAttribute("height", 250);
rect1.setAttribute("rx", 20);
rect1.setAttribute("fill", "#ff0000");
rect1.setAttribute("stroke", "#000000");
rect1.setAttribute("stroke-width", "2px");
g1.appendChild(rect1);
var rect2 = document.createElementNS(svgns, "rect");
rect2.setAttribute("x", 140);
rect2.setAttribute("y", 120);
rect2.setAttribute("width", 250);
rect2.setAttribute("height", 250);
rect2.setAttribute("rx", 40);
rect2.setAttribute("fill", "#0000ff");
rect2.setAttribute("stroke", "#000000");
rect2.setAttribute("stroke-width", "2px");
rect2.setAttribute("fill-opacity", 0.7);
g1.appendChild(rect2);
svg.appendChild(g1);
window.onload = function() {
var div = document.getElementById('test');
div.appendChild(svg);
}
</script>
</head>
<body>
<div id='test' style="width:500px;height:500px;"></div>
<button onclick="doit()"<click me</button>
</body>
</html>
沒有留言:
張貼留言