Widget:CharlesSVG: Difference between revisions
No edit summary |
No edit summary |
||
| (40 intermediate revisions by the same user not shown) | |||
| Line 9: | Line 9: | ||
<body> | <body> | ||
<svg > | <svg version="1.1" | ||
width="300" height="200" | |||
<rect width=" | xmlns="http://www.w3.org/2000/svg"> | ||
< | <rect width="100%" height="100%" fill="red" /> | ||
<circle cx="150" cy="100" r="80" fill="green" /> | |||
< | |||
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> | |||
</svg> | </svg> | ||
---- | |||
<svg><!--Blue Line via D3.js--> | |||
<div > | |||
<div | |||
<script> | <script> | ||
var width = 300; | var width = 300; | ||
| Line 41: | Line 39: | ||
</script> | </script> | ||
</div> | </div> | ||
</svg> | |||
<svg> | |||
<!--Green Rectangle via D3.js--> | <!--Green Rectangle via D3.js--> | ||
<div id = "D3GreenRectangle"> | <div id = "D3GreenRectangle"> | ||
| Line 48: | Line 46: | ||
var width = 300; | var width = 300; | ||
var height = 300; | var height = 300; | ||
var svg = d3.select("#D3BlueLine") | var svg = d3.select("#D3BlueLine") | ||
.append("svg") | .append("svg") | ||
.attr("width", width) | .attr("width", width) | ||
.attr("height", height); | .attr("height", height); | ||
svg.append("rect") | |||
.attr("x", 20) | .attr("x", 20) | ||
.attr("y", 20) | .attr("y", 20) | ||
| Line 62: | Line 58: | ||
</script> | </script> | ||
</div> | </div> | ||
</svg> | |||
<svg> | |||
<!--Green Rectangle via D3.js--> | <!--Green Rectangle via D3.js--> | ||
<div id = "D3GreenRectangle"> | <div id = "D3GreenRectangle"> | ||
| Line 68: | Line 65: | ||
var width = 300; | var width = 300; | ||
var height = 300; | var height = 300; | ||
var svg = d3.select("#D3BlueLine") | var svg = d3.select("#D3BlueLine") | ||
.append("svg") | .append("svg") | ||
| Line 82: | Line 78: | ||
</script> | </script> | ||
</div> | </div> | ||
</svg> | |||
</body> | </body> | ||
</html> | </html> | ||
Latest revision as of 09:47, 6 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 version="1.1"
width="300" height="200"
xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red" />
<circle cx="150" cy="100" r="80" fill="green" />
<text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
</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>