我需要帮助 append rect 一些深度

Question

好的，所以我正在尝试在黑色 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。任何建议将不胜感激。

Answer 1

您必须在 SVG 标签内添加矩形，所以我添加了行

 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>

我需要帮助 append rect 一些深度

i need help append rect a few deep

html

javascript

svg

append

rect