确定，所以我试图在黑色svg标签内的绿色矩形内附加两个橙色矩形。黑色有效，绿色有效，但是橙色无效。有什么建议吗？HTML：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris(test)</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src = "https://code.jquery.com/jquery-3.4.1.js"></script>
<script src = "js/jquery.1.js"></script>
<script src = "js/main.js"></script>
</head>
<body>
<svg id="container" width= "500" height= "650" style= "background-color: black" position= "relative">
</svg>
</body>
</html>
JS：
var svgNS = "http://www.w3.org/2000/svg";
var htmlNS = "http://www.w3.org/1999/xhtml";
function createRect() {
var elem = document.getElementById("container");
var shape = document.createElementNS(svgNS, "rect");
shape.id = "shape1";
shape.style.width = "150px";
shape.style.height = "100px";
shape.style.fill = "green";
shape.style.position = "relative"
elem.append(shape);
var rec = document.createElementNS(svgNS, "rect");
rec.id = "box1";
rec.style.width = "150px";
rec.style.height = "50px";
rec.style.fill = "orange";
rec.style.y = "50px";
rec.style.position = "absolute";
shape.append(rec);
var rec2 = document.createElementNS(svgNS, "rect");
rec2.id = "box2";
rec2.style.width = "50px";
rec2.style.height = "51px";
rec2.style.fill = "orange";
rec2.style.x = "50px";
shape.append(rec2);
}
window.onload = createRect;
因此，在绿色矩形内应该有一个看起来像倒置的T的橙色形状。任何建议将不胜感激。
const svg = document.querySelector("svg");
var svgNS = "http://www.w3.org/2000/svg"; var htmlNS = "http://www.w3.org/1999/xhtml"; function createRect() { var elem = document.getElementById("container"); var shape = document.createElementNS(svgNS, "rect"); const svg = document.querySelector("svg"); <!-- shape.id = "shape1"; --> shape.style.width = "150px"; shape.style.height = "100px"; shape.style.fill = "green"; shape.style.position = "relative" <!-- elem.append(shape); --> svg.append(shape); var rec = document.createElementNS(svgNS, "rect"); <!-- rec.id = "box1"; --> rec.style.width = "150px"; rec.style.height = "50px"; rec.style.fill = "orange"; rec.style.y = "50px"; rec.style.position = "absolute"; <!-- shape.append(rec); --> svg.append(rec); var rec2 = document.createElementNS(svgNS, "rect"); <!-- rec2.id = "box2"; --> rec2.style.width = "50px"; rec2.style.height = "51px"; rec2.style.fill = "orange"; rec2.style.x = "50px"; <!-- shape.append(rec2); --> svg.append(rec2); } window.onload = createRect;<!DOCTYPE html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tetris(test)</title> <link rel="stylesheet" href="styleSheets/main.css"> <script src = "https://code.jquery.com/jquery-3.4.1.js"></script> <script src = "js/jquery.1.js"></script> <script src = "js/main.js"></script> </head> <body> <svg id="container" width= "500" height= "650" style= "background-color: black" position= "relative"> </svg> </body>在SVG内部只有绝对定位。因此，如果您希望橙色矩形位于顶部，则需要在绿色矩形之后添加它们。这就是纯SVG的外观
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="650" viewBox="0 0 500 650" > <rect width="100%" height="100%" fill="black" /> <rect width="150" height="100" fill="green" /> <rect y="50" width="150" height="50" fill="orange" /> <rect x="50" width="50" height="51" fill="orange" /> </svg>