Widget:CharlesSVG: Difference between revisions
No edit summary |
No edit summary |
||
| Line 16: | Line 16: | ||
<rect width="200" height="80"> | <rect width="200" height="80"> | ||
</svg> | </svg> | ||
<!--Blue Line via D3.js--> | <svg><!--Blue Line via D3.js--> | ||
<div > | <div > | ||
<script> | <script> | ||
| Line 34: | Line 34: | ||
</script> | </script> | ||
</div> | </div> | ||
</svg> | |||
<svg> | |||
<!--Green Rectangle via D3.js--> | <!--Green Rectangle via D3.js--> | ||
<div id = "D3GreenRectangle"> | <div id = "D3GreenRectangle"> | ||
| Line 53: | Line 53: | ||
</script> | </script> | ||
</div> | </div> | ||
</svg> | |||
<svg> | |||
<!--Green Rectangle via D3.js--> | <!--Green Rectangle via D3.js--> | ||
<div id = "D3GreenRectangle"> | <div id = "D3GreenRectangle"> | ||
| Line 72: | Line 73: | ||
</script> | </script> | ||
</div> | </div> | ||
</svg> | |||
Revision as of 15:49, 5 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> <rect width="300" height="300" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect> <circle cx="300" cy="100" r="80" fill="orange" stroke="black" stroke-width="4"></circle> </svg>
<svg > <rect width="200" height="80"> </svg>
<svg>
<script>
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>
</svg> <svg>
<script>
var width = 300;
var height = 300;
var svg = d3.select("#D3BlueLine")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("x", 20)
.attr("y", 20)
.attr("width", 200)
.attr("height", 100)
.attr("fill", "green");
</script>
</svg> <svg>
<script>
var width = 300;
var height = 300;
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>
</svg>
</body>
</html>