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

发布于 2025-01-28 17:16:27 字数 1286 浏览 5 评论 0原文

当我运行函数createct（）时，为什么红色矩形不会出现。任何帮助都将不胜感激。

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后，应该出现一个红色框，左上角应出现。

原文

Why is the red rectangle not appearing when I run the function createRect(). Any help would be much appreciated.

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>

After I run this function onload, a red box should appear in the upper left corner.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半世蒼涼 2025-02-04 17:16:27

也许是这样

<!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>

maybe so

<!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>

回复收藏 0 原文

浪推晚风 2025-02-04 17:16:27

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);
}

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);
}

回复收藏 0 原文

~没有更多了~