Search notes:
SVG/JavaScript example: dynamically create a svg line with JavaScript
The following example dynamically creates an svg
line with
JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>line with javascript</title>
<script type="text/javascript">
function main() {
var xmlns ="http://www.w3.org/2000/svg";
var svg = document.createElementNS (xmlns, "svg");
svg.setAttributeNS(null, 'width' , 500);
svg.setAttributeNS(null, 'height', 500);
var line = document.createElementNS(xmlns, 'line');
line.setAttributeNS(null, 'x1', 10);
line.setAttributeNS(null, 'y1', 10);
line.setAttributeNS(null, 'x2', 490);
line.setAttributeNS(null, 'y2', 490);
line.style.stroke='rgb(255,90,50)';
line.style.strokeWidth=5;
svg.appendChild(line)
document.getElementsByTagName('body')[0].appendChild(svg);
}
</script>
</head>
<body onload='main();'>
</body>
</html>