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>
Github repository about-svg, path: /javascript/line.html

See also

SVG examples

Index

Fatal error: Uncaught PDOException: SQLSTATE[HY000]: General error: 8 attempt to write a readonly database in /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php:78 Stack trace: #0 /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php(78): PDOStatement->execute(Array) #1 /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php(30): insert_webrequest_('/notes/design/g...', 1759422455, '216.73.216.42', 'Mozilla/5.0 App...', NULL) #2 /home/httpd/vhosts/renenyffenegger.ch/httpsdocs/notes/design/graphic/svg/examples/javascript/line(71): insert_webrequest() #3 {main} thrown in /home/httpd/vhosts/renenyffenegger.ch/php/web-request-database.php on line 78