Widget:CharlesSVG: Difference between revisions

Revision as of 11:12, 4 November 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="400" height="110">
 <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

</svg> <svg width="400" height="110">

 <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

</svg>

  <svg width="400" height="110">
 <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

</svg>

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

</svg>

  <svg height="100" width="100">
 <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />

</svg>

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

     <script>
        var width = 300;
        var height = 300;
        //Create SVG element
        var svg = d3.select("#D3BlueLine")
           .append("svg")
           .attr("width", width)
           .attr("height", height);
        //Create and append rectangle element
        svg.append("rect")
           .attr("x", 20)
           .attr("y", 20)
           .attr("width", 200)
           .attr("height", 100)
           .attr("fill", "green");
        </script>

     <script>
        var width = 300;
        var height = 300;
        //Create SVG element
        var svg = d3.select("#D3BlueLine")
           .append("svg")
           .attr("width", width)
           .attr("height", height);
        //Create and append rectangle element
        svg.append("rect")
           .attr("x", 20)
           .attr("y", 20)
           .attr("width", 200)
           .attr("height", 100)
           .attr("fill", "green");
        </script>

  </body>

</html>

@@ Line 26: / Line 26: @@
        <!--Blue Line via D3.js-->
        <div id = "D3BlueLine">
-       <script >
+       <script language = "javascript" >
           var width = 300;
           var height = 300;