我正在尝试在 svg 元素中创建一个 rect 元素，但它不起作用

Question

为什么我运行函数createRect()时没有出现红色矩形。任何帮助将不胜感激。

function createRect() {
    var rec = document.createElement("rect");
    rec.style.width = "100px";
    rec.style.height = "100px";
    rec.style.left = "0px";
    rec.style.top = "0px";
    rec.style.fill = "red";
    rec.style.position = "absolute";
    var elem = document.getElementById("container");
    elem.append(rec);


}

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>
</html>

我运行这个函数onload后，左上角应该会出现一个红框

Answer 1

function createRect() {
    var rec = document.createElementNS('http://www.w3.org/2000/svg',"rect");
    rec.style.width = "100px";
    rec.style.height = "100px";
    rec.style.left = "0px";
    rec.style.top = "0px";
    rec.style.fill = "red";
    rec.style.position = "relative";
    var elem = document.getElementById("container");
    elem.append(rec);
}

Answer 2

也许是

<!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">
      </svg>

  </body>
</html>

<script>
function createRect() {
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("svg");
const rec = document.createElementNS(svgNS ,'rect');
 rec.setAttribute('width', 100);
 rec.setAttribute('height', 100);
 rec.setAttribute('x', 50);
 rec.setAttribute('y', 50);
 rec.setAttribute('fill', 'red');
  
 svg.appendChild(rec);
}

window.onload = createRect;


</script>

我正在尝试在 svg 元素中创建一个 rect 元素，但它不起作用

I am trying to create a rect element within a svg element, but its not working

html

javascript

svg

rect