Widget:CharlesSVG: Difference between revisions

Revision as of 14:02, 31 October 2023

<html>

  <head>
     <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
     <style>
        body { font-family: Arial; }
     </style>
  </head>

  <body>

        <svg width = "300" height = "300">
           <line x1 = "100" y1 = "100" 
              x2 = "200" y2 = "200" style = "stroke:rgb(255,0,0);
              stroke-width:2"/>
        </svg>

        <script language = "javascript">
           var width = 300;
           var height = 300;
           var svg = d3.select("#svgcontainer")
              .append("svg")
              .attr("width", width)
              .attr("height", height);
           svg.append("line")
              .attr("x1", 200)
              .attr("y1", 200)
              .attr("x2", 100)
              .attr("y2", 100)
              .style("stroke", "rgb(0,0,255)")
              .style("stroke-width", 2);
        </script>

  </body>

</html>