<html lang = "en"> <head> <title>SVG rectangle - 迹忆客(jiyik.com)</title> <script type = "text/javascript" src = "https://cdn.jsdelivr.net/npm/d3@7"></script> <style> body { font-family: Arial; } </style> </head> <body> <div id = "svgcontainer"></div> <script language = "javascript"> var width = 300; var height = 300; var svg = d3.select("#svgcontainer") .append("svg") .attr("width", width) .attr("height", height); var group = svg.append("g") .attr("transform", "translate(60, 60) rotate(30)"); var rect = group.append("rect") .attr("x", 20) .attr("y", 20) .attr("width", 60) .attr("height", 30) .attr("fill", "green") var circle = group .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 30) .attr("fill", "red") </script> </div> </body></html>